Skip to main content

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.

Was this interesting?

Subscribe to my daily newsletter for software professionals on software development and delivery, Drupal, DevOps, community, and open-source.

About me

Picture of Oliver

I'm a certified Drupal Triple Expert and former Drupal Association staff member with 18 years of experience, a Drupal core contributor, public speaker, live streamer, and host of the Beyond Blocks podcast.