Skip to main content

What is Tailwind CSS

Tailwind CSS is a utility-first CSS framework. This guide walks you through Tailwind CSS, including the new features in v4.

Features of Tailwind CSS​

Utility-first​

Traditional CSS frameworks (such as Bootstrap) provide predefined components. Tailwind CSS, by contrast, provides low-level utility classes that you combine to build a design.

<!-- Traditional approach -->
<button class="btn btn-primary">Button</button>

<!-- Tailwind CSS -->
<button class="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600">
  Button
</button>

Benefits​

BenefitDescription
High customizabilityRealize any design freely
ConsistencyYou choose from predefined scales (spacing, colors, sizes), which keeps things uniform
Development speedStyle without leaving your HTML
Small bundle sizeOnly the classes you use are emitted

Drawbacks​

DrawbackMitigation
HTML gets longSolve it by extracting components
Learning curveThe regular naming makes it easy to pick up
Initial setupGreatly simplified in v4

New features in Tailwind CSS v4​

v4, released in January 2025, brought many improvements.

CSS-First Configuration​

Instead of the JavaScript config file used up to v3, you can now configure directly in CSS.

/* v4: configure in CSS */
@import "tailwindcss";

@theme {
  --color-brand: #3b82f6;
  --font-display: "Inter", sans-serif;
}

The Oxide engine​

The new Oxide engine greatly improves build speed.

Dynamic utility values​

You can now specify integer values that follow the spacing scale without brackets (fixed units like 100px are still specified with brackets, as before).

<!-- v3: arbitrary spacing values are specified with brackets -->
<div class="mt-[68px] gap-[52px]">...</div>

<!-- v4: integers on the spacing scale can be specified without brackets (mt-17 = 17 × 0.25rem = 4.25rem) -->
<div class="mt-17 gap-13">...</div>

<!-- Fixed units off the scale, like px, still use brackets -->
<div class="h-[100px] z-[999]">...</div>

Built-in support for container queries​

Container queries are available with no plugin.

<div class="@container">
  <div class="@md:flex @lg:grid">...</div>
</div>

3D transforms​

Utilities for 3D transforms were added.

<div class="rotate-x-45 rotate-y-30 translate-z-10">...</div>

oklch color palette​

Adopts the oklch color space, which can express more vivid colors.

Structure of this guide​

This guide proceeds from the basics to practice in the following five groups.

Basics (chapters 1–3)​

  • An overview of Tailwind CSS and setting up your environment
  • The utility-first mindset

Layout (chapters 4–6)​

  • Layout with Flexbox and Grid
  • The spacing system

Styling (chapters 7–10)​

  • Typography, colors, backgrounds, borders
  • Sizing and positioning

Responsive and interaction (chapters 11–15)​

  • Responsive design
  • State variants, dark mode
  • Container queries, animation

Advanced (chapters 16–18)​

  • Customization and extension
  • Component design patterns
  • A hands-on project

Who this is for​

  • Those who understand the basics of HTML/CSS
  • Those who want to learn modern CSS styling
  • Those interested in efficient frontend development

Prerequisites​

  • The basic structure of HTML
  • The basic CSS properties (margin, padding, color, etc.)

Now, let's explore the world of Tailwind CSS together.