tailwind
text-6xl text-gray-950 tracking-tighter text-balance

Rapidly build modern websites without ever leaving your HTML.

text-lg text-white font-medium

A utility-first CSS framework packed with classes like flex, pt-4, text-center and rotate-90 that can be composed to build any design, directly in your markup.

Get started
    <div class="flex flex-col items-center gap-6 p-7 rounded-2xl">
        <div>
            <img class="size-48 shadow-xl rounded-md"/>
        </div>
        <div class="flex items-center">
            <span class="text-2xl font-medium">Class Warfare</span>
            <span class="font-medium text-sky-500">The Anti-Patterns</span>
            <span class="flex gap-2 font-medium text-gray-600 dark:text-gray-400">
                <span>No. 4</span>
                <span>.</span>
                <span>2025</span>
            </span>
        </div>
    </div>
The Anti-Patterns
Class Warfare The Anti-Patterns No. 4 . 2025

Sponsors

text-4xl text-white tracking-tighter text-balance

Supported by the best.

text-base text-gray-600

Tailwind is supported by incredible partners and sponsors who make it possible for a team of talented designers and engineers to maintain the framework full-time.

Why Tailwind CSS?

text-4xl text-gray-950 tracking-tighter text-balance

Built for the modern web.

text-base text-gray-600

Tailwind is unapologetically modern, and takes advantage of all the latest and greatest CSS features to make the developer experience as enjoyable as possible.

Responsive design

Okay, it’s not exactly cutting edge, but just throw a screen size in front of literally any utility to apply it at a specific breakpoint.

Filters

What’s a website these days without a few backdrop blurs? Keep stacking filters until your designer asks you to please, please stop.

Dark mode

If you’re not a fan of burning your retinas, just stick dark: in front of any color to apply it in dark mode.

CSS variables

Customizing your theme is as simple as creating a few CSS variables.

P3 colors

The color palette now uses more vibrant wide gamut colors without you needing to understand what any of that even means.

CSS grid layout

Using grid utilities directly in your HTML makes it so much easier to reason about complex layouts.

Transitions and animations

Transitions that work the way you'd expect — throw a few utilities on an element and you're in business.

Cascade layers

Tailwind uses CSS layers so you don’t have to worry about specificity issues.

Logical properties

Supporting multiple language text directions is no longer a nightmare.

Container queries

Tag an element as a container to let children adapt to changes in its size.

Gradients

No need to remember that complicated gradient syntax — create silky-smooth gradients with just a few utility classes.

3D transforms

Sometimes two dimensions aren’t enough. Scale, rotate, and translate any element in 3D space to add a touch of depth.

How it works

text-4xl text-white tracking-tighter text-balance

Ship faster and smaller.

text-base text-gray-400

Tailwind automatically removes all unused CSS when building for production, which means your final CSS bundle is the smallest it could possibly be. In fact, most Tailwind projects ship less than 10kB of CSS to the client.

index.html app.css package.json
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Tailwind CSS</title> <link rel="stylesheet" href="/build.css" /> </head> <body> <button class="flex items-center bg-blue-500 px-4 py-3 text-white hover:bg-blue-400"></button> </body> </html>
Terminal
Done in 421ms Done in 940ms Done in 2ms Done in 1ms Done in 993ms
build.css
.px-4 { padding-inline: calc(var(--spacing, 0.25rem) * 4); } .py-3 { padding-block: calc(var(--spacing, 0.25rem) * 3); } .text-white { color: var(--color-white, #fff); } .hover\:bg-blue-400 { &:hover { @media (hover: hover) { background-color: var(--color-blue-400, oklch(70.7% 0.165 254.624)); } } } }

Tailwind in the wild

text-4xl text-white tracking-tighter

Build whatever you want, without touching your CSS file.

text-base text-gray-400

Because Tailwind is so low-level, it never encourages you to design the same site twice. Some of your favorite sites are built with Tailwind, and you probably had no idea.