Tailwind CSS Tutorial · Tailwind Basics · Lesson 1 of 27

Tailwind CSS Introduction

What Tailwind CSS is, how utility-first styling works, and why it's become one of the most popular ways to style websites.

Create a free account to save this page, take notes and track your progress. Sign in

What is Tailwind CSS?

Tailwind CSS is a CSS framework made of small, single-purpose classes called utilities. Instead of writing CSS in a separate file, you style elements by combining classes right in your HTML:

p-6 adds padding, bg-white sets a white background, rounded-xl rounds the corners,
shadow-lg adds a shadow, text-sky-600 colours the text, font-bold makes it bold.

Here is a complete card built only with utility classes. The preview under the code is rendered live; press Edit & try it yourself, change bg-sky-500 to bg-rose-500 and run it again:

A card made of utilitiesTry it yourself

<div class="p-8 bg-slate-100">
  <div class="max-w-sm p-6 bg-white rounded-xl shadow-lg">
    <h2 class="text-xl font-bold text-slate-900">Learn Tailwind CSS</h2>
    <p class="mt-2 text-slate-600">Style anything by combining small utility classes.</p>
    <button class="mt-4 px-4 py-2 bg-sky-500 text-white font-semibold rounded-lg hover:bg-sky-600">
      Start now
    </button>
  </div>
</div>

The same card with traditional CSS

.card { padding: 1.5rem; background: white; border-radius: 0.75rem; box-shadow: 0 10px 15px rgb(0 0 0 / 0.1); }
.card-title { font-size: 1.25rem; font-weight: 700; }
.card-button { margin-top: 1rem; padding: 0.5rem 1rem; background: #0ea5e9; color: white; border-radius: 0.5rem; }

With Tailwind you skip inventing class names like .card-title and switching between files. You see exactly how an element looks by reading its classes.

Why people like it

Benefit	What it means
Fast to build	Style while you write HTML, no context switching
Consistent design	Spacing, colours and sizes come from one scale, so things line up
Small CSS files	Only the classes you use end up in the final CSS
Safe changes	Editing one element's classes can't break another page
Responsive and states built in	`md:flex`, `hover:bg-sky-600`, `dark:bg-gray-900`

The common criticism is "long class lists". In real projects you put repeated markup in components (React, Vue, Blade, partials), so each pattern is written once. See reusing styles.

A second taste

A profile rowTry it yourself

<div class="flex items-center gap-4 p-6">
  <div class="size-12 rounded-full bg-linear-to-br from-amber-400 to-rose-500"></div>
  <div>
    <p class="font-semibold text-gray-900">Ada Lovelace</p>
    <p class="text-sm text-gray-500">First programmer</p>
  </div>
  <span class="ml-auto rounded-full bg-emerald-100 px-3 py-1 text-xs font-medium text-emerald-700">Online</span>
</div>

This tutorial uses Tailwind CSS v4 (the current major version). Every example on these pages is live.

Test yourself

What is a 'utility class' in Tailwind?

A small class that applies one specific style, like p-4 for padding
A JavaScript plugin
A pre-built component such as a navbar
A CSS variable

Show answer

Answer: A small class that applies one specific style, like p-4 for padding

Tailwind is made of single-purpose classes you combine to build any design.