Introduction to Tailwind CSS

Welcome to the Tailwind CSS for Beginners tutorial series on Scriptly. Over 14 chapters you will learn to design real interfaces — cards, navigation bars, forms and dashboards — mostly with small single-purpose classes, while understanding exactly why each one works. This chapter explains what Tailwind CSS is, how it turns class names into shipped CSS, and what changed in version 4.

What is Tailwind CSS?

Tailwind CSS is a utility-first CSS framework. Instead of inventing names such as .hero-card and writing the rules yourself, you compose a design from pre-built utilities where every class does exactly one job: bg-white sets the background colour, p-6 sets the padding, and rounded-xl rounds the corners.

<div class="bg-white rounded-xl shadow-lg p-6">
  <h2 class="text-xl font-bold text-slate-800">Monthly report</h2>
  <p class="mt-2 text-slate-500">Everything looks healthy.</p>
</div>

Expected output:

A white panel with soft rounded corners and a gentle drop shadow
sitting on a light page. Inside it, a bold near-black heading sits
above a smaller grey sentence, separated by a small vertical gap.

The markup tells the whole story of the design — the trade-off being a class list far longer than a single class="card".

Anatomy of a utility class

Almost every utility follows one pattern: a prefix naming a CSS property group, then a value from a fixed scale.

Because every project shares these scales, a gap of 4 means the same 1rem everywhere: consistency becomes the default. If you know the CSS underneath — see The Box Model — each utility reads almost instantly.

How Tailwind generates your CSS

Tailwind is a build tool, not a stylesheet you download once. During development it watches your project and rebuilds whenever you save:

1. It scans your source files — HTML, Blade, JSX, Vue, JavaScript — for class-like strings.
2. Every class it recognises becomes a real CSS rule.
3. Classes it never sees anywhere in your source are left out of the stylesheet completely.

Because only the classes you use are generated, a small site can ship a few kilobytes instead of a full framework. The flip side: a typo silently produces nothing, because an invented class has no rule behind it — a trap we revisit in The Utility-First Approach.

Where Tailwind fits

The three routes, side by side:

A component library gives you a shared look quickly, but also a shared default look. With utilities you choose every value, while the shared scales keep the design from drifting apart.

What changed in Tailwind v4

This series teaches v4, and knowing where it differs from v3 saves you a lot of confusion when you read older articles:

• One CSS import — @import "tailwindcss"; replaces the three @tailwind directives of v3.
• CSS-first configuration — design tokens live in an @theme block in your stylesheet. There is no tailwind.config.js by default; v4 loads a JavaScript file only if you ask with @config.
• Automatic source detection — no content array to maintain; you add @source rules only for unusual locations.
• Modern CSS underneath — colours are oklch, every theme value becomes a real CSS variable, and container queries plus cascade layers are built in.
• A faster engine — the compiler was rewritten, so rebuilds during development are near-instant.

A first Tailwind page

For this chapter the browser build is quickest — nothing has to be installed:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Tailwind in five minutes</title>
  <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
</head>
<body class="bg-slate-100 flex items-center justify-center min-h-screen">
  <main class="bg-white rounded-2xl shadow-xl p-8 max-w-sm">
    <h1 class="text-2xl font-extrabold text-slate-900">Hello, Tailwind!</h1>
    <p class="mt-3 text-slate-600 leading-relaxed">I styled this page without writing a single CSS rule.</p>
    <button class="mt-5 w-full bg-indigo-600 hover:bg-indigo-700 text-white font-semibold py-2.5 rounded-lg">
      Get started
    </button>
  </main>
</body>
</html>

Expected output:

A pale grey page with a white rounded card centred in the middle of
the viewport. The card holds a large bold title, a comfortable grey
paragraph, and a full-width indigo button that darkens when the
mouse moves over it.

The browser build suits learning; a compiled stylesheet is the job of the next chapter.

Common mistakes

• Treating Tailwind as a black box — it renames CSS rather than replacing it. Without box-model basics you will confuse p-6 with m-6, so revisit The Box Model.
• Sprinkling magic numbers — pt-[37px] compiles fine, but the same strange values repeatedly appearing means you want a design token instead.
• Shipping the browser build — the CDN script compiles in the visitor's browser: perfect for a demo, wrong for production.
• Skipping the build setup — utilities only exist once Tailwind is wired into a compile step, so nothing works until chapter 2 is done.

Practice checklist

1. Save the example above as index.html and open it in your browser.
2. Change the card to max-w-md and the button to bg-emerald-600, then reload.
3. Inspect the button and find the padding-block: 0.625rem rule that py-2.5 generated.
4. Predict three class names you expect to exist — for example bg-pink-300, text-right and border-2 — and test each one.

Next: set up a proper compile step — Installing and Configuring Tailwind.