Tailwind CSS Cheat Sheet (2026)

What is Tailwind CSS (and the v4 note)

Tailwind CSS is a utility-first CSS framework. Instead of writing custom CSS rules in a separate file, you style elements by composing small, single-purpose classes right in your HTML. A class like p-4 adds padding, text-center centers text, and bg-blue-500 sets a background color. String a few together and the element is styled, no stylesheet switching required.

The current release is Tailwind v4 (v4.3.2 as of 2026). Version 4 changed how you set the framework up, so anything you copy from an old tutorial may not match. This cheat sheet sticks to v4 syntax throughout. New to CSS in general? Start with our CSS cheat sheet to learn the underlying properties, and keep the HTML cheat sheet handy for the markup you will be styling.

Install and set up Tailwind (v4)

Tailwind v4 has a smaller, faster setup than v3. Pick the path that fits your project. For anything you ship to real users, you need a build step: Vite or PostCSS. The browser build is for quick experiments only.

Vite plugin (recommended). Install the package and its Vite plugin, then register it:

npm install tailwindcss @tailwindcss/vite

// vite.config.js
import tailwindcss from '@tailwindcss/vite'

export default {
  plugins: [
    tailwindcss(),
  ],
}

PostCSS. If your toolchain uses PostCSS instead of Vite:

npm install tailwindcss @tailwindcss/postcss postcss

// postcss.config.mjs
export default {
  plugins: {
    "@tailwindcss/postcss": {},
  },
}

The CSS entry is now one line. In your main CSS file, add:

@import "tailwindcss";

That single import replaces the three v3 directives you may have seen: @tailwind base;, @tailwind components;, and @tailwind utilities;. Do not use those in v4.

Browser build (prototyping only). For a quick sketch with no build tools, drop in the script tag:

<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>

The old v3 CDN at cdn.tailwindcss.com is deprecated. Use the jsDelivr browser build above for prototypes, and never in production.

Customizing. There is no tailwind.config.js by default anymore. You define design tokens in CSS with the @theme block:

@import "tailwindcss";

@theme {
  --color-brand: #1da1f2;
}

That one variable auto-generates matching utilities like bg-brand and text-brand. Configuration lives in your CSS now, not in a JavaScript file.

Layout

These classes control how an element sits on the page: whether it is a block or flex parent, and how it is positioned.

Flexbox

Turn an element into a flex container, set the direction, then align and distribute its children along both axes.

Grid

CSS Grid gives you rows and columns. Define the track count, then let items span or start at specific lines.

Spacing

Padding is inside the border, margin is outside. Tailwind uses one scale for both, and each step equals 0.25rem, so p-4 is 1rem.

Sizing

Set width and height with fractions, fixed steps, or viewport units. Use size-* when you want both dimensions equal.

Typography

Control size, weight, alignment, line height, and letter spacing, then set text color from the built-in palette.

Backgrounds and gradients

Set solid backgrounds with bg-*. Gradients were renamed in v4: use bg-linear-to-r where v3 had bg-gradient-to-r.

Borders and radius

Add borders on all or selected sides, round corners, and draw dividers between stacked children.

Effects

Add depth and focus cues with shadows, opacity, rings, and blur.

Colors and the scale

Tailwind ships 22 built-in hues, such as slate, gray, red, and blue. Each hue has shades from 50 (lightest) through 900 and 950 (darkest). You apply them as {utility}-{color}-{shade}.

Responsive breakpoints

Tailwind is mobile-first. An unprefixed class applies everywhere, and each breakpoint prefix is a min-width that kicks in on wider screens. So md:flex lg:grid-cols-4 becomes flex at 768px and a four-column grid at 1024px.

State variants

Prefix a class with a state and it only applies in that state. This covers interaction, form status, dark mode, and structural position.

Transitions and transforms

Animate property changes smoothly, and move, scale, or rotate elements without leaving your HTML.

Arbitrary values

When no built-in utility gives you the exact value, use square brackets to pass one straight through. This works for lengths, colors, grid templates, and more.

Tailwind v4 vs v3 gotchas

If you learned Tailwind on v3, a handful of changes will trip you up. Here are the ones that matter most.

Two more things to keep in mind. The browser build is for prototyping only; production needs a build step through Vite or PostCSS. And v4 targets modern browsers only, meaning Safari 16.4+, Chrome 111+, and Firefox 128+.

Download the Tailwind CSS Cheat Sheet (PDF)

Want this reference offline? Grab the printable PDF below and keep it next to your editor. It fits the whole v4 utility set on a few pages, so you can scan for the class you need without breaking flow.

Download the Tailwind CSS Cheat Sheet (PDF)

Related cheat sheets and FAQ

Building your first site from scratch? Our guide on how to create a website walks through the whole process. Pair Tailwind with the fundamentals and you will move faster.

Is Tailwind v4 different from v3? Yes. The big shifts: configuration is CSS-first through @theme instead of a JavaScript config file, setup is a single @import "tailwindcss"; line, and content detection is automatic so you no longer list your template files.

Do I need to write any CSS with Tailwind? Mostly no. You compose utility classes for the bulk of your styling. For custom design tokens or repeated patterns, you can reach for @theme and @apply, but most days you stay in the HTML.

Is Tailwind better than Bootstrap? They aim at different things. Tailwind is utility-first and unopinionated, so you assemble your own components. Bootstrap ships ready-made components like navbars and modals. If you prefer prebuilt pieces, see our Bootstrap cheat sheet.

Can I use Tailwind without a build step? Only the browser build, and only for prototyping. Anything you ship should run through Vite or PostCSS so unused classes are stripped and the output stays small.