Web development

What Tailwind CSS is

Tailwind CSS is a utility-first framework: classes in the markup and one CSS file from them. Here is what it does, what it does not and what it costs.

Key points

  • Tailwind CSS is a utility-first framework, not a component library.
  • The build emits only the CSS for the classes you use: there is no browser runtime.
  • Behaviour and accessibility stay outside: you need headless primitives and keyboard tests.

Tailwind CSS is a utility-first CSS framework: you write classes such as flex, gap-4 and text-sm in the markup, and the build emits only the CSS those classes use. It is not a component library and it ships no JavaScript to the browser.

How it works

There is no runtime and no inline styles: a build step reads the source, finds the classes in use and writes one CSS file. Tailwind CSS 4 configures itself in CSS, with @import "tailwindcss", instead of the old mandatory tailwind.config.js. Source: the tailwindcss.com documentation, read on 1 November 2026.

npm install tailwindcss @tailwindcss/cli
npx @tailwindcss/cli -i ./src/input.css -o ./dist/output.css --watch

The file src/input.css has to contain @import "tailwindcss";. The command needs Node and writes dist/output.css; --watch rebuilds it on every change.

What it is not

It is not a component library: it ships no buttons, dialogs or accessible menus. It is not Bootstrap: it imposes neither a 12-column grid nor a theme. It is not CSS-in-JS: the classes live in the HTML, not in JavaScript objects.

Why teams pick it

  • Spacing, colour and type come from tokens declared once, not from values copied by hand.
  • Unused CSS never reaches the browser: the build writes only the classes present in the code.
  • The same classes work in React, Vue, Svelte and static HTML, without rewriting the stylesheet.
  • Source: the tailwindcss.com documentation and the MIT licence in the repository, read on 1 November 2026.

What it costs

Class strings grow long and have to be read as code. You need a build step, and classes assembled at runtime must go in a safelist or be reduced to complete values. The MIT licence costs nothing, but maintaining the markup stays a cost for the team.

The limitation

Tailwind adds no behaviour and no semantics. A div with classes is still a div: focus, keyboard, ARIA roles and error states remain yours. For those you need headless primitives, for example Radix UI or Base UI, both MIT, plus manual keyboard tests.

Where to continue

The EneUI catalogue holds 1,556 blocks and 111,985 components; the record hero-01 from shadcn/ui blocks is a section built with Tailwind classes, worth reading before you copy it. If a class is not applied, read content paths; for calculations with variables, calc() and CSS variables; the comparison of approaches is in copy-paste or headless.

Frequently asked questions

Is Tailwind CSS a framework or a library?

It is a utility-first CSS framework. It is not a component library: it provides atomic classes, not buttons or dialogs with accessible behaviour.

Does it need JavaScript in the browser?

No. Tailwind emits a CSS file at build time and sends no runtime to the browser. The JavaScript you run is your framework's, not Tailwind's.

Can I use it without a build step?

For a quick test yes, with the Play CDN, which Tailwind advises against in production. A real site needs the build, because the CDN generates CSS in the browser and slows loading down.

Is it free?

Yes. Tailwind CSS ships under the MIT licence and needs no account. Tailwind Plus is a separate paid product, but the framework does not depend on it.

Does it work with React and Next.js?

Yes. Classes are strings in the markup, so they work in React, Next.js, Vue and Svelte. Only the build integration changes, not the way you write components.