Skip to main content

​
CSS over the years

If you are working on one of our older projects, you may encounter a legacy CSS codebase. This codebase may not adhere to the standards outlined in this document. In these cases, you should follow the existing code style and standards.
1

Zurb Foundation

Older projects use Zurb Foundation as a base framework. You should follow the Foundation CSS style guide for these projects.
2

Own grid styles

We realized we were mostly using Zurb for the grid classes so we decided to create our own grid classes to avoid the bloat of Foundation. You will find scss files that contain our own grid classes. You should follow the existing code style and standards.
3

TailwindCSS

Newer projects use TailwindCSS as a base framework. You should follow the TailwindCSS CSS style guide for these projects. We’ve decided to move to TailwindCSS for its easy of use, flexibility and performance. The rest of this document will be about how to work with TailwindCSS.

​
Basic Styles

You should add your TailwindCSS classes in the markup of the component you are working on. If you need to style something that we don’t have control over the markup(i.e. a core block), you can add the classes directly in the scss file using the @apply rule. We do not use theme.json for styles. We mainly use it to add custom variables and enable/disable features.

​
How TailwindCSS knows what colors my theme uses?

There’s a tailwind.config.js file that looks into theme.json for things like colors, font sizes, and font family. Otherwise the default TailwindCSS classes are available to use.
  • Colors will be retrieved from the settings.color.palette and from settings.custom.colors.
  • Font sizes will be retrieved from the settings.typography.fontSizes
  • Font families will be retrieved from the settings.typography.fontFamilies

​
Targetting elements with JavaScript

If you need to target an html element with JavaScript, the preference is that you either use a data- attribute or a class that starts with js-. In case you choose to use a class, this class should not hold any styles and should be used only for JavaScript.

​
Common issues

​
My TailwindCSS classes are not working

TailwindCSS looks at certain files to see if it can recognize the classes you are using. The final compiled CSS file will only have the classes that are being used. That means that if you add a class in the inspector that is not in the markup, it won’t work as it is not in the final file. As soon as you add that class to some markup, it will work.

​
TailwindCSS doesn’t know about my blocks

Please check your tailwind.config.js file for the content entry. This is where we tell TailwindCSS where to search for classes. On new themes, there’s a commented out line there that looks for a particular pattern for your blocks plugin name. By default the names we look for are {prefix}-blocks and {prefix}-blocks-blockName.