Websites · Glossary

What is Tailwind CSS?

Tailwind CSS is an open source CSS framework built on small utility classes, such as p-4 for padding, text-lg for larger text and md:grid-cols-2 for two columns on medium screens, which are combined directly in the HTML instead of writing separate style sheets. At build time it generates only the CSS for the classes actually used.

Traditional CSS gives each element a name and styles the name elsewhere. Tailwind puts the styling on the element itself, which many teams find faster to write and easier to keep consistent.

Nuwan Madhusanka · Co-founder

3 min read · Published 13 October 2026

How utility classes work

Each class does one thing: mt-6 adds top margin, rounded-lg rounds corners, bg-amber-100 sets a background. An element's look is the list of its classes. Responsive and state variants are prefixes, such as md: for medium screens and hover: for hover, so a component's full behaviour reads in one place.

Design tokens and themes

Tailwind works from a scale of spacing, colours, font sizes and breakpoints, which keeps spacing and colours consistent instead of every developer inventing values. Projects can define their own tokens, such as brand colours, and switch them for a dark theme using CSS variables.

Why it spread

It removes the hunt for good class names, keeps unused styles out of the final file, makes responsive design quick, and pairs well with component libraries and with AI code generation, because the styling is explicit and local to each component.

Common criticisms

Long class lists can look cluttered, and markup carries styling decisions that some prefer in separate files. Teams usually answer this by building reusable components, so the long lists live in a few places rather than across every page.

Where it shows up in OneCraft

Code mode sites are written with Tailwind classes and shadcn/ui components on a React Router starter, with the site colours in a tokens file so the AI can switch palettes and dark mode in one place. Every change goes through a type check, a linter and a build before it can be published.

Questions people ask

Is Tailwind CSS free?

Yes. Tailwind CSS is open source under the MIT licence and free for commercial use. The company behind it sells optional design resources, but the framework itself costs nothing and runs at build time in your project, so visitors never download Tailwind itself.

Does Tailwind make websites slower?

No, usually the opposite. At build time Tailwind scans the code and produces a CSS file containing only the classes actually used, which is typically small. Pages load less unused CSS than with many traditional frameworks that ship every style whether used or not.

Do I need to learn Tailwind to edit a code mode site?

Not when an AI writes and edits the code from your chat messages. If you or a developer later work on the downloaded project, Tailwind classes are quick to learn because each one does a single, readable job such as text-center or gap-4.

Is Tailwind the same as Bootstrap?

No. Bootstrap ships ready made components with their own look, such as buttons and navbars. Tailwind ships low level utilities you combine into any look. Bootstrap sites tend to resemble each other; Tailwind leaves the design entirely to you or your component library.

Can Tailwind do dark mode?

Yes. A dark: prefix applies styles when dark mode is active, either following the device setting or a class on the page. Projects that keep colours in CSS variables can switch the whole palette by changing the variables for dark mode.

Make one with websites

The button opens the generator with this use case already described. Change the wording to match your own.

Create a website with OneCraft

Sources

Written and checked by the OneCraft team. Last checked 13 October 2026.