Tailwind CSS: A Primer

Tailwind CSS is a relatively new free open source CSS framework, that takes a different approach than most established frameworks like Bootstrap and Bulma.

Instead of offering “abstract” CSS classes like .alert .alert-danger, that set a lot of CSS attributes, it builds on many small “utility classes” like p-4 text-red-700 border rounded border-red-900/10 bg-red-50. In the end, it kind of feels like writing regular CSS, but makes the style live closer to the HTML.

So when we are mixing our styles with HTML, and each class mostly sets just one CSS attribute, why don’t we just write our CSS inline, and leave Tailwind out of the equation? Compared to inline CSS, it has two advantages:

1. You don’t have to choose the specific attribute values yourself, but can rely on Tailwinds smart defaults (which are configurable). E.g. you can write rounded instead of the exact border radius value, or red-700 instead of a concrete red HEX color.
2. You can use features like media queries, that are not possible with inline CSS. E.g. lg:w-1/3 md:w-1/2 w-full for specifying different widths depending on the viewer screen width.

This utility-first design approach, combined with really good documentation and sample material, really good defaults, really good developer experience and IDE integration, has allowed Tailwind to gain quite some momentum, and a lot of new trendy websites are using it.

You can try Tailwind direct in your browser with their Tailwind Playground, incl. live preview and auto-complete.

Template Collections

Sharing Tailwind CSS code between projects is quite easy. Why? On the one hand, you are just sharing a list of CSS classes, and on the other hand, the specific spacing & colors will automatically match your target project - because you configure these values on a per-project basis. This is the reason why some resources have emerged, where Tailwind components & complete designs are provided. As an outlook, here is a short list of such resources.

Tailwind UI (paid)

One really interesting approach the Tailwind CSS developers took was offering the framework for free, and providing a paid collection of UI templates: Tailwind UI. You get a lot of components and complete layouts - the price point of around 250€ is probably a really good deal if you are using Tailwind professionally.

Cruip (paid)

Cruip offers five complete website templates that are built with Tailwind CSS (the rest is built with their own “Cruip CSS”). These templates include not just the landing page, but a couple of other pages, e.g. about page, contact page…I have used the Mosaic template for a private project & can highly recommend it. Cruip is paid, but the price is very reasonable: 49$ for an individual theme, 79$ for access to all themes, including future ones.

Tailblocks (free)

Tailblocks provides free Tailwind components with some specific use cases in mind (e.g. contact form, e-commerce result grid).

HyperUI (free)

HyperUI is another website that provides free components. It looks like the focus is on the individual little components, less on providing ready-to-use combinations of multiple components for larger use cases.

daisyUI (free)

daisyUI builds on Tailwind, but introduces own CSS component classes, that wrap multiple Tailwind utility classes. daisyUI contains a lot of components incl. support for multiple themes - pretty cool! I’m personally not 100% convinced that wrapping Tailwind utility classes is the way go. I prefer seeing all base-classes a component is made up of, instead of abstracting them away. This makes it easier to modify the component to my own needs.