Tailwind: Not just translating CSS to utility classes
Whilst a number of classes that Tailwind CSS generates are single-value utility classes such as .block { display: block; } and .relative { position: relative; }, it also includes additional things such as setting a default line height with a font size, adding variants for group-hover and focus-within (as well as various other pseudo states).
It includes utilities for adding horizontal or vertical space or styling dividers between elements.
As well prefixing a class using a screen modifier, such as md:flex, you can stack them and set a maximum screen value. For example, md:max-lg:flex will only flex between the md and lg breakpoints.
If has official plugins for typography styles, forms, line-clamp (truncating text) and aspect ratios, as well as numerous community plugins and supports arbitrary values if you need them.
If you take a look at the Tailwind CSS documentation, you'll definitely find some interesting and useful things.
- Oliver
P.S. There's less than a year until Drupal 7's end-of-life date. Plan your upgrade to Drupal 10 now!
