There is a special syntax for creating user-defined utilities.
For example, here is how you would define the utility class foo:
Inside the body of the definition, you can use Turbo utility classes just like when applying styles to HTML elements. You can use other user-defined utilities as well.
User defined utilities are typically stored in separate files. These files shall have the file extension .turbo, for example theme.turbo.
You can combine selectors with user-defined utility classes. (This is extremely powerful.)
For example, you may define separate classes for medium and large buttons, then proceed to show the large button on mobile screens (to support fat-fingers) and the medium button on desktop screens where the mouse can easily target smaller areas.
Here is how you would define these classes:
And here is how you would apply these classes to an actual button:
You can define utilities via raw CSS using the following syntax:
This will define the utility class customGrid that you can also use when defining higher level utilities.