← All libraries

Tailwind CSS

CSS
↗ Official site

CSS & styling

Style your UI with short utility classes directly in your HTML.

What it does

Tailwind CSS gives you hundreds of small CSS classes like `flex`, `text-lg`, `bg-blue-500` that you apply directly in your HTML. Instead of writing custom CSS, you compose styles from these utilities. Very fast once you know the class names.

When to use it

Use this when you want to style a web project quickly without writing custom CSS files.

Real example

You're building a landing page and want a responsive hero section that stacks vertically on mobile. Prompt: 'Use Tailwind to style the hero div: className="flex flex-col md:flex-row items-center gap-8 px-6 py-16". Make the headline text-4xl md:text-6xl font-bold. Make the CTA button bg-red-500 hover:bg-red-600 text-white px-8 py-3 rounded-full.'

Good to know

Takes a few hours to get the hang of, then it becomes very fast. v4 (latest) needs no config file.

Alternatives

Install

$ npm install tailwindcss @tailwindcss/vite

Use cases

stylingutility CSSresponsive designUI

Language

CSS

Category

CSS & styling

More in CSS & styling

Other tools in the same category

JS NativeWind

Use Tailwind CSS classes in your React Native app.

mobile stylingTailwindReact Native
CSS UnoCSS

Instant, on-demand atomic CSS — like Tailwind but faster and more flexible.

utility CSSatomic CSSfast build
CSS Open Props

CSS custom properties (variables) for consistent design tokens.

design tokensCSS variablesdesign system
CSS Sass / SCSS

CSS with superpowers — variables, nesting, mixins, and more.

CSSstylingvariables