Libraries are higher level classes defined in a namespace.
For example, you could create a library named theme in the file theme.turbo.
You could define the btn class in it, which you could access via the class name theme.btn from outside the library.
Here is how you could define the btn class:
and here is how you would use it in HTML code:
When defining the class name btn, you can use Turbo utility classes just like when applying styles to HTML elements. You can also use other user-defined utilities, they are first-class citizens.
By convention, user defined classes are stored in files having the file extension .turbo, for example theme.turbo.
You can combine selectors with user-defined classes just like with any of the base utilities.
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:
Classes defined this way are also first-class citizens, meaning you can use them in other user defined classes and also combine them with selectors.
Libraries may depend on other libraries.