Tailwind CSS: why I use it in almost every project

Some tools I use out of habit and others because they made my life simpler. Tailwind CSS belongs to the second group: I love it, and I use it in almost every new project, this site included. In this article I explain what it is, why it convinces me and, just as frankly, where it is not the right choice. You do not need to be a programmer to follow: all you need to know is that CSS is the language that decides how a page looks, that is colours, spacing, typefaces and layout.

What Tailwind CSS is

In traditional CSS you invent names (say .product-card), write in a separate file how that name should look, and then apply the name to a piece of the page. It works, but over time the style files grow, the names multiply and nobody remembers what can be touched without breaking something elsewhere.

Tailwind flips the approach. It provides lots of small classes, each with a single job: one for inner spacing, one for text colour, one for rounded corners. You combine them directly on the element, so the style reads right where it is needed. There is no pre-designed component: you do the design yourself, building block by building block.

At first glance it looks chaotic, and in practice, after a few days, it becomes hard to give up.

Why I use it

You work faster

I do not have to invent names or jump between two files to understand what a piece of the page does. I build and see the result straight away. On a project with many pages, that means fewer development hours and less time chasing style details.

The CSS stops growing

With classic CSS, every new page risks adding more rules and more exceptions. With Tailwind you always reuse the same vocabulary, so the weight of the styling stays stable even as the site grows. On top of that, only what was actually used ends up in the published version: the file is small, which helps speed, something I also cover in the Core Web Vitals guide.

The design stays consistent

Colours, spacing, type sizes and breakpoints for phone and tablet are defined once, in a single configuration point. From then on the whole site draws on the same system: no slightly different blue on every page, no margins by eye. If the project starts from a Figma file, the values of the design become the vocabulary of the site.

Changing things is safe

A class affects the element it is written on, not others. Changing the look of a button does not blow up a distant page. For whoever inherits the site, or an agency handing me part of the work, it is a concrete guarantee: you intervene where needed, without side effects.

Responsive and light/dark themes almost for free

Specifying how an element changes on a small, medium or large screen, or in the dark theme, takes a handful of characters next to the base class. That makes it simpler to look after every device, which today is the starting point of any site and not an extra.

Version 4: simpler than before

The latest version has a new, faster engine and a configuration written directly in CSS instead of a separate JavaScript file. For me that means less configuration and fewer tools to maintain. It integrates well with Vite, the tool that builds the site in Nuxt, through a dedicated plugin. It is the combination I use here: Nuxt for the structure, Tailwind for the look.

The limits, no beating around the bush

No tool is perfect, and Tailwind has its less comfortable sides:

• The HTML fills up with classes. It is scary at first. You solve it by splitting the page into components, so the same combination of classes is written only once.
• You need to know CSS. Tailwind does not replace it: it makes it faster to write. Someone who does not know what a margin or a grid is will not get there with Tailwind.
• It does not suit everything. In WordPress sites built with page builders, or with ready-made themes, there is neither a way nor a reason to introduce it. It makes most sense in projects built from scratch, like a custom theme or a Nuxt site.
• Long content needs a little care. The text of an article, produced by an editor, has no classes: it is handled with a small dedicated set of rules, which exist in Tailwind's ecosystem.

What changes for whoever commissions a site

You do not need to know what Tailwind is to benefit from it, but the consequences show:

1. Lighter pages, and so faster to load, especially on a phone.
2. A uniform look across the whole site, because every page uses the same colours and measures.
3. Easier maintenance: changing a detail does not become an undertaking, and whoever comes after me understands the code right away.
4. More realistic quotes, because the visual side does not drag along hours of unexpected tweaking.

If you are an agency there is one more advantage: you get code your developers can read without deciphering a convention I invented, because Tailwind is by now a widely used standard.

When I do not recommend it

If the site is a WordPress built on a ready-made theme and it is fine as it is, there is no point redoing everything to use Tailwind. The same goes for a small tweak to an existing site written in traditional CSS: better to respect what is there. A tool should be chosen for the project, not for fashion, and sometimes the most honest answer is "leave it as it is".

Why entrust it to me

I have been programming since 1999, with more than 300 projects delivered and about 30 agencies as an external developer. I have seen many ways of writing CSS come and go, and Tailwind is the one that today gives me the best balance of speed, order and performance. I use it together with Nuxt and Vue for fast sites that are easy to evolve, and I turn your designs into pages faithful to the drawing on every screen.

If you have a project to set up properly, or a site you want to make faster and tidier, write to me: a chat of about 20 minutes, no strings attached, then a written, free proposal. The service is in Website creation.