Skip to main content

​
Welcome to Tailwind CSS

Tailwind CSS is a utility-first CSS framework that gives you low-level utility classes to build completely custom designs without ever leaving your HTML.

​
Why Tailwind CSS?

Instead of opinionated predesigned components, Tailwind provides low-level utility classes that let you build completely custom designs without fighting the framework.

Quick to Build

Get started in minutes with our quickstart guide and build your first Tailwind project

Utility-First

Build complex components from a constrained set of primitive utilities

Responsive Design

Responsive everything with intuitive responsive modifiers built right in

Customizable

Customize your design system with CSS variables and configuration

​
Features at a Glance

​
Lightning Fast Development

Write utility classes directly in your markup and see changes instantly. No context switching between HTML and CSS files. 
<button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
  Click me
</button>

​
Built for Production

Tailwind automatically removes unused CSS in production, resulting in the smallest possible file size.
Tailwind CSS v4 introduces a new high-performance engine built in Rust, delivering faster builds and better developer experience.

​
Framework Agnostic

Tailwind CSS works with any framework or no framework at all. Use it with React, Vue, Angular, Next.js, or plain HTML.

Vite

Next.js

PostCSS

​
What’s New in v4

Tailwind CSS v4 brings significant performance improvements and new features:
  • Rust-powered engine: Up to 10x faster builds with the new Oxide engine
  • Zero configuration: Works out of the box with automatic content detection
  • Enhanced CSS features: Native CSS variable support and improved @apply handling
  • Modern color palettes: New mauve, olive, mist, and taupe colors in the default theme
  • Logical properties: New utilities for modern CSS logical properties (inline-*, block-*, inset-s-*, etc.)
Tailwind CSS v4 includes breaking changes from v3. Check out the migration guide if you’re upgrading an existing project.

​
Next Steps

1

Install Tailwind CSS

Follow our installation guide to set up Tailwind in your project using npm, yarn, or pnpm.
2

Quick Start

Jump into our quickstart guide to build your first component in minutes.
3

Editor Setup

Configure your editor with IntelliSense and plugins for the best development experience.
4

Explore Core Concepts

Learn about utility-first CSS and how Tailwind’s approach differs from traditional CSS frameworks.

​
Community & Support

Join thousands of developers building with Tailwind CSS:
This documentation covers Tailwind CSS v4. If you’re using v3, please refer to the v3 documentation.

Build docs developers (and LLMs) love

Get started for freeTalk to us