Rapidly build modern websites without ever leaving your HTML.

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. 

                    
  01       <figure class="bg-slate-100 rounded-xl p-8 dark:bg-slate-800">
  02            <img class="w-24 h-24 rounded-full mx-auto" src="/sarah-dayan.jpg" alt="" width="384" height="512">
  03            <div class="pt-6 text-center space-y-4">
  04              <blockquote>
  05                    <p class="text-lg font-medium">
  06                            “Tailwind CSS is the only framework that I've seen scale
  07                             on large teams. It’s easy to customize, adapts to any design,
  08                             and the build size is tiny.”
  09                    </p>
  10               </blockquote>
  11               <figcaption class="font-medium">
  12                    <div class="text-sky-500 dark:text-sky-400">
  13                             Sarah Dayan
  14                    </div>
  15                    <div class="text-slate-700 dark:text-slate-500">
  16                             Staff Engineer, Algolia
  17                    </div>
  18               </figcaption>
  19            </div>
  20      </figure>

“Tailwind CSS is the only framework that I've seen scale on large teams. It’s easy to customize, adapts to any design, and the build size is tiny.”

Sarah Dayan

Staff Engineer, Algolia

“Best practices” don’t actually work.

I’ve written a few thousand words on why traditional “semantic class names” are the reason CSS is hard to maintain, but the truth is you’re never going to believe me until you actually try it. If you can suppress the urge to retch long enough to give it a chance, I really think you’ll wonder how you ever worked with CSS any other way.

Adam Wathan

Creator of Tailwind CSS

Build anything

Build whatever you want, seriously.

Because Tailwind is so low-level, it never encourages you to design the same site twice. Even with the same color palette and sizing scale, it's easy to build the same component with a completely different look in the next project.

Getting Started

Installation

Editor Setup

Using with Preprocessors

Optimizing for Production

Browser Support

Upgrade Guide

Customization

Configuration

Content Configuration

Theme Configuration

Customizing Screens

Customizing Colors

Customizing Spacing

Plugins

Presets

Core Concepts

Utility-First Fundamentals

Handling Hover, Focus, and Other States

Responsive Design

Dark Mode

Reusing Styles

Adding Custom Styles

Functions & Directives

Community

GitHub

Discord

Twitter

YouTube