Getting Started with Tailwind CSS: From Zero to Production

Learn Tailwind CSS from scratch — utility-first workflow, responsive design, dark mode, component extraction, and integrating with React and Next.js.

What Is Tailwind CSS?

Tailwind CSS is a utility-first CSS framework. Instead of writing custom CSS classes like .card with all their properties, you compose designs directly in HTML using small utility classes like flex, p-4, bg-white, rounded-lg.

It sounds verbose at first. It becomes incredibly fast once it clicks.

Why Utility-First Works

Traditional CSS:

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

.card {
  display: flex;
  padding: 1rem;
  background: white;
  border-radius: 0.5rem;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

Tailwind:

<div class="flex p-4 bg-white rounded-lg shadow-sm">Content</div>

The Tailwind version is faster to write, easier to read inline, and produces no unused CSS in production.

Installation

With Next.js (v4):

npx create-next-app@latest my-app --tailwind

Manual install:

npm install tailwindcss @tailwindcss/postcss autoprefixer

/* globals.css */
@import "tailwindcss";

The Core Utility Classes

Spacing

<!-- Margin -->
<div class="m-4 mx-auto mt-8 mb-4">

<!-- Padding -->
<div class="p-4 px-6 py-3">

Numbers map to 4px increments: 4 = 1rem, 8 = 2rem, 2 = 0.5rem

Flexbox

<div class="flex items-center justify-between gap-4">
  <span>Left</span>
  <span>Right</span>
</div>

Grid

<div class="grid grid-cols-3 gap-6">

Typography

<h1 class="text-3xl font-bold text-gray-900">
<p class="text-base text-gray-600 leading-relaxed">
<span class="text-sm font-medium uppercase tracking-wide text-indigo-600">

Colors

<div class="bg-indigo-600 text-white hover:bg-indigo-700">

Responsive Design

Prefix any utility with a breakpoint:

<!-- Mobile first: 1 col → 2 cols on md → 3 cols on lg -->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">

Breakpoints: sm (640px), md (768px), lg (1024px), xl (1280px), 2xl (1536px)

Dark Mode

<div class="bg-white dark:bg-gray-900 text-gray-900 dark:text-white">

/* In your CSS config — "class" strategy lets you control it with JS */
@source "./src";

document.documentElement.classList.toggle('dark');

Hover, Focus, Active States

<button class="bg-indigo-600 hover:bg-indigo-700 focus:ring-2 focus:ring-indigo-500 active:scale-95 transition-all">
  Submit
</button>

Extracting Components

When you have repeated patterns, extract them:

// In React/Next.js
function Button({ children, variant = 'primary' }) {
  const base = 'px-4 py-2 rounded-lg font-medium transition-colors';
  const variants = {
    primary: 'bg-indigo-600 text-white hover:bg-indigo-700',
    secondary: 'bg-gray-100 text-gray-900 hover:bg-gray-200',
    ghost: 'text-gray-600 hover:bg-gray-100',
  };
  return (
    <button className={`${base} ${variants[variant]}`}>
      {children}
    </button>
  );
}

Production Build (Automatic Tree-Shaking)

Tailwind v4 automatically removes unused utilities. Your final CSS will only contain classes actually used in your HTML/JSX. A typical production bundle is 5-15KB.

Conclusion

Tailwind has a learning curve — you spend the first week learning utility names instead of writing CSS. After that, you build UI faster than any other approach. The combination of responsive prefixes, dark mode, hover states, and component extraction makes it the most productive CSS workflow available today.