Tailwind CSS

What Is Tailwind CSS?

Tailwind CSS is a utility-first CSS framework that gives you low-level utility classes to build custom designs directly in your HTML. Instead of writing custom CSS or overriding pre-built components, you compose designs using small, single-purpose classes like text-center, bg-blue-500, and p-4.

Utility-First vs Component-First

Traditional CSS frameworks like Bootstrap ship with ready-made components — buttons, cards, navbars — that look the same everywhere. Tailwind takes the opposite approach: it provides building blocks, not finished components. This means every project you build looks unique.

<!-- Bootstrap approach -->
<button class="btn btn-primary">Click Me</button>

<!-- Tailwind approach -->
<button class="bg-blue-600 text-white font-semibold py-2 px-4 rounded hover:bg-blue-700">
  Click Me
</button>

With Tailwind, you see exactly what each element looks like by reading the classes. No need to hunt through CSS files to understand the styling.

Why Choose Tailwind?

No context switching — Style directly in your HTML without jumping to a separate stylesheet.
Tiny production builds — Tailwind automatically removes unused CSS, keeping your bundle small.
Consistent design tokens — Spacing, colors, and typography follow a pre-defined scale, keeping designs visually consistent.
Responsive & state variants — Apply styles for different screen sizes or states (hover, focus) with simple prefixes.
Highly customizable — Modify the default theme via a configuration file to match your brand exactly.

Setting Up Tailwind CSS

There are several ways to add Tailwind to a project. We will use the Tailwind CLI, which is the simplest and most versatile method.

Prerequisites

Node.js (version 14 or higher)
A code editor (VS Code recommended)
Basic knowledge of HTML and CSS

Step 1 — Create a Project Folder

mkdir tailwind-project
cd tailwind-project

Step 2 — Initialize npm & Install Tailwind

npm init -y
npm install -D tailwindcss
npx tailwindcss init

The npx tailwindcss init command creates a tailwind.config.js file at the root of your project. This is where you will customize Tailwind later in the series.

Step 3 — Configure Template Paths

Open tailwind.config.js and tell Tailwind where your HTML files live so it can tree-shake unused styles:

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./*.html"],
  theme: {
    extend: {},
  },
  plugins: [],
};

Step 4 — Create Your CSS Input File

Create a file called src/input.css with the three Tailwind directives:

@tailwind base;
@tailwind components;
@tailwind utilities;

These directives inject Tailwind's base reset, component classes, and utility classes at build time.

Step 5 — Build Your CSS

npx tailwindcss -i ./src/input.css -o ./dist/output.css --watch

The --watch flag tells Tailwind to rebuild automatically whenever you save changes. The compiled CSS is output to dist/output.css.

Step 6 — Create Your First HTML Page

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My Tailwind Project</title>
  <link href="./dist/output.css" rel="stylesheet">
</head>
<body class="bg-gray-100 min-h-screen flex items-center justify-center">
  <h1 class="text-4xl font-bold text-blue-600">Hello, Tailwind!</h1>
</body>
</html>

Open this file in your browser and you should see a centered blue heading on a light gray background. Congratulations — your Tailwind project is up and running!

Using the CDN (Quick Prototyping)

For quick experiments, you can skip the build step entirely and load Tailwind from a CDN:

<script src="https://cdn.tailwindcss.com"></script>

Add that script tag inside <head> and all Tailwind utilities become available instantly. Note: the CDN is not recommended for production because the full framework is loaded and cannot be purged.

Recap

Tailwind CSS is a utility-first framework for building custom UIs.
It differs from component frameworks by providing low-level building blocks.
Setup involves installing via npm, creating a config file, and running the CLI watcher.
For quick prototyping, you can use the Tailwind CDN.

In the next tutorial, we will create a proper HTML template and start exploring Tailwind's core utility classes.

Intro & Setup