What Is Tailwind CSS?

Introduction

Tailwind CSS is a styling tool built around utility classes: small, single-purpose classes such as p-4 (padding), text-lg (large text) and bg-blue-500 (a blue background). Instead of inventing a class name like .card and writing CSS for it, you build the design by combining utilities directly in your HTML.

This course uses Tailwind v4 (the examples were checked with version 4.3.3). You should know basic HTML and CSS first. The CSS and HTML courses on this site cover them.

Traditional CSS versus utilities

Traditional approach:

<div class="card">Hello</div>

.card {
  padding: 1rem;
  border-radius: 0.75rem;
  background-color: white;
}

Utility-first approach:

<div class="rounded-xl bg-white p-4">Hello</div>

There is no separate CSS file to write for this element. Each class does one thing, and the combination is the design.

What a class really does

Tailwind is not magic. Each class compiles to ordinary CSS. I compiled a few with Tailwind 4.3.3 to show you the real output:

The default --spacing value is 0.25rem, so p-4 is 4 times 0.25rem, which is 1rem. The values come from CSS variables in a theme, which you can change later.

Why people use it

• You stay in one place. Structure and style live together, so you do not jump between files.
• No naming. You do not spend time inventing class names.
• A consistent scale. Spacing, colours and sizes come from a shared set of values, so designs look coherent.
• Small CSS. Tailwind generates CSS only for the classes you actually use.
• Safe changes. Editing one element's classes cannot break another part of the site, unlike editing a shared .card rule.

The common complaints are long class lists and a learning curve for the class names. Later lessons show how to manage both.

Setting it up

Tailwind v4 needs very little set-up. The steps depend on your build tool. For a Vite project:

npm install tailwindcss @tailwindcss/vite

Add the plugin to vite.config.ts, then create a CSS file that contains one line:

@import "tailwindcss";

Link that CSS file in your page or import it in your app. Tailwind scans your project files for class names and builds the CSS for them. This very website uses the same single import with the PostCSS plugin (@tailwindcss/postcss). There are also a command-line tool (@tailwindcss/cli) and a framework-specific guide for most tools in the official installation docs, which are the source of truth if the steps change.

Browser support: Tailwind v4 targets modern browsers (the upgrade guide lists Safari 16.4, Chrome 111 and Firefox 128 as the minimums). If you must support older browsers, stay on v3.4.

Preflight

The import also includes Preflight, a small reset that removes browser defaults: margins on headings become 0, lists lose their bullets and images become block-level. That is why an unstyled h1 looks like plain text. You then style everything yourself with utilities.

Try it yourself

Create a new HTML page or a Vite project with Tailwind. Make a card with the classes rounded-xl bg-white p-4 shadow-sm, then change p-4 to p-8 and compare. Open the browser's developer tools, select the element and find the CSS rule Tailwind generated.

Summary

• Tailwind is utility-first: you build designs by combining small classes that each apply one CSS declaration.
• Classes compile to normal CSS that uses theme variables, such as padding calculated from the spacing scale.
• Tailwind v4 is set up with a single @import "tailwindcss" line, and Preflight resets browser defaults.