TL;DR

Tailwind CSS is a utility-first CSS framework that lets you build designs directly in HTML/JSX by composing small, single-purpose utility classes. The JIT (Just-In-Time) compiler generates only the CSS you actually use, resulting in tiny production bundles. Responsive design is handled with mobile-first breakpoint prefixes (sm:, md:, lg:, xl:). Dark mode works with the dark: prefix. Tailwind v4 (2025) switches to a CSS-first configuration model — no more tailwind.config.js. For React/Next.js, the cn() utility from clsx+tailwind-merge is essential for conditional class merging. Tailwind is best for teams that want rapid UI development with a consistent design system without writing custom CSS.

Key Takeaways

• Tailwind is utility-first — you style elements by composing small single-purpose classes like flex, pt-4, text-center, and rotate-90 directly in HTML/JSX, rather than writing custom CSS.
• The JIT (Just-In-Time) compiler scans your source files and generates only the CSS for classes you actually use — production bundles are typically under 10KB even for large apps.
• Responsive design uses mobile-first breakpoint prefixes: sm: (640px), md: (768px), lg: (1024px), xl: (1280px), 2xl: (1536px). Unprefixed utilities apply to all screen sizes.
• Dark mode is supported natively with the dark: variant prefix. You can configure class-based (class="dark" on html) or media-based (prefers-color-scheme) strategy.
• Tailwind v4 (2025) introduces CSS-first configuration: import Tailwind in CSS, define your theme as CSS custom properties, and eliminate tailwind.config.js entirely.
• For React/Next.js, use cn() from clsx + tailwind-merge to safely merge conditional classes, and consider shadcn/ui or cva for building reusable typed component variants.

/* Traditional CSS approach */
.card {
  display: flex;
  flex-direction: column;
  padding: 1.5rem;
  background-color: #ffffff;
  border-radius: 0.5rem;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
  max-width: 24rem;
}

/* Tailwind CSS utility-first approach */
<div class="flex flex-col p-6 bg-white rounded-lg shadow-sm max-w-sm">
  ...
</div>

<!-- No CSS file needed — styles live in the markup -->

<!-- JIT Arbitrary values — any CSS value with square brackets -->
<div class="w-[237px] h-[117px] bg-[#1a73e8] top-[117px]">
  Exact pixel control when needed
</div>

<!-- Arbitrary properties — full CSS escape hatch -->
<div class="[mask-image:linear-gradient(to_bottom,black,transparent)]">
  Fade out effect
</div>

<!-- Opacity modifier (slash syntax) -->
<div class="bg-blue-500/50 text-white/80">
  50% opacity background, 80% opacity text
</div>

<!-- Padding: p-{n} = n * 4px -->
<div class="p-4">       /* padding: 16px all sides */
<div class="px-6 py-3"> /* padding: 12px top/bottom, 24px left/right */
<div class="pt-2 pb-8"> /* padding-top: 8px, padding-bottom: 32px */

<!-- Margin -->
<div class="mx-auto">   /* margin: 0 auto (centering) */
<div class="mt-4 mb-8"> /* margin-top: 16px, margin-bottom: 32px */
<div class="-mt-4">     /* negative margin: margin-top: -16px */

<!-- Arbitrary values -->
<div class="p-[13px] mt-[3.25rem]"> /* exact values */
<div class="w-[calc(100%-2rem)]">    /* CSS calc() support */

<!-- Named palette colors (50 through 950 shades) -->
<p class="text-blue-500">            /* color: #3b82f6 */
<div class="bg-gray-100">            /* background: #f3f4f6 */
<div class="border border-red-300">  /* border: 1px solid #fca5a5 */
<div class="text-emerald-600">       /* color: #059669 */

<!-- Opacity modifier (slash) -->
<div class="bg-blue-500/50">         /* opacity: 0.5 */
<div class="bg-black/10">            /* black at 10% opacity */

<!-- Arbitrary color values -->
<p class="text-[#1a73e8]">           /* exact hex */
<div class="bg-[rgb(59,130,246)]">   /* rgb values */
<div class="border-[hsl(220,90%,56%)]"> /* hsl values */

<!-- Font sizes -->
<p class="text-xs">   /* 12px */
<p class="text-sm">   /* 14px */
<p class="text-base"> /* 16px */
<p class="text-lg">   /* 18px */
<p class="text-xl">   /* 20px */
<p class="text-2xl">  /* 24px */
<h1 class="text-4xl font-bold"> /* 36px, font-weight: 700 */

<!-- Font weight -->
<p class="font-thin">       /* 100 */
<p class="font-normal">     /* 400 */
<p class="font-semibold">   /* 600 */
<p class="font-bold">       /* 700 */
<p class="font-extrabold">  /* 800 */

<!-- Line height, tracking, alignment -->
<p class="leading-relaxed tracking-wide text-center">

<!-- Mobile-first responsive design -->
<!-- No prefix = all screen sizes (mobile) -->
<!-- sm: = 640px+, md: = 768px+, lg: = 1024px+, xl: = 1280px+ -->

<div class="p-2 md:p-4 lg:p-6">
  8px on mobile, 16px on md, 24px on lg
</div>

<p class="text-sm md:text-base lg:text-lg">
  Font grows with screen size
</p>

<!-- Responsive grid: 1 col → 2 cols → 3 cols → 4 cols -->
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4">
  <div>Card 1</div>
  <div>Card 2</div>
  <div>Card 3</div>
</div>

<!-- Hide/show at breakpoints -->
<div class="hidden md:block">Only visible on md and above</div>
<div class="block md:hidden">Only visible below md</div>

<!-- Centered flex container -->
<div class="flex justify-center items-center min-h-screen">
  Perfectly centered content
</div>

<!-- Navigation bar: logo left, links right -->
<nav class="flex justify-between items-center px-6 py-4">
  <div>Logo</div>
  <div class="flex gap-6">
    <a>Home</a>
    <a>About</a>
    <a>Contact</a>
  </div>
</nav>

<!-- Sidebar layout: sidebar + main content -->
<div class="flex gap-8">
  <aside class="w-64 flex-none">Sidebar</aside>
  <main class="flex-1">Main content grows to fill</main>
</div>

<!-- Vertical stack with equal spacing -->
<div class="flex flex-col gap-4">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</div>

<!-- Wrapping tag list -->
<div class="flex flex-wrap gap-2">
  <span class="px-3 py-1 bg-blue-100 text-blue-700 rounded-full">React</span>
  <span class="px-3 py-1 bg-green-100 text-green-700 rounded-full">TypeScript</span>
  <span class="px-3 py-1 bg-purple-100 text-purple-700 rounded-full">Tailwind</span>
</div>

<!-- Responsive card grid -->
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
  <div class="bg-white rounded-lg shadow p-4">Card 1</div>
  <div class="bg-white rounded-lg shadow p-4">Card 2</div>
  <div class="bg-white rounded-lg shadow p-4">Card 3</div>
</div>

<!-- 12-column layout with spanning -->
<div class="grid grid-cols-12 gap-4">
  <aside class="col-span-3">Sidebar (3/12)</aside>
  <main class="col-span-9">Content (9/12)</main>
</div>

<!-- Full-width featured item + 3 cards -->
<div class="grid grid-cols-2 md:grid-cols-4 gap-4">
  <div class="col-span-2">Featured item (2 cols)</div>
  <div>Card 1</div>
  <div>Card 2</div>
</div>

<!-- Auto-fit columns (CSS subgrid-like) -->
<div class="grid grid-cols-[repeat(auto-fill,minmax(200px,1fr))] gap-4">
  <!-- Items auto-fill available space -->
</div>

/* tailwind.config.js — v3 dark mode strategy */
module.exports = {
  darkMode: "class",  // or "media"
  // ...
};

<!-- HTML: add "dark" class to html element -->
<html class="dark">

<!-- Component with dark mode variants -->
<div class="bg-white dark:bg-gray-900 text-gray-900 dark:text-gray-100
            border border-gray-200 dark:border-gray-700
            rounded-lg p-6">
  <h2 class="text-xl font-bold text-gray-900 dark:text-white">Title</h2>
  <p class="text-gray-600 dark:text-gray-400">Body text</p>
  <button class="bg-blue-600 dark:bg-blue-500 hover:bg-blue-700
                 dark:hover:bg-blue-400 text-white px-4 py-2 rounded">
    Action
  </button>
</div>

// Toggle dark mode in JavaScript
function toggleDarkMode() {
  document.documentElement.classList.toggle("dark");
  localStorage.setItem("theme",
    document.documentElement.classList.contains("dark") ? "dark" : "light"
  );
}

Tailwind v4: In v4, dark mode strategy is configured via @variant dark (&:where(.dark, .dark *)) in your CSS, or use the built-in @media (prefers-color-scheme: dark) variant from @import "tailwindcss".

// tailwind.config.js — Tailwind v3
/** @type {import("tailwindcss").Config} */
module.exports = {
  content: [
    "./src/**/*.{js,ts,jsx,tsx,mdx}",
    "./pages/**/*.{js,ts,jsx,tsx,mdx}",
    "./components/**/*.{js,ts,jsx,tsx,mdx}",
  ],
  darkMode: "class",
  theme: {
    extend: {
      colors: {
        brand: {
          50:  "#eff6ff",
          500: "#3b82f6",
          900: "#1e3a8a",
        },
        primary: "#6d28d9",
      },
      fontFamily: {
        sans: ["Inter", "system-ui", "sans-serif"],
        mono: ["Fira Code", "monospace"],
      },
      screens: {
        "3xl": "1920px",  // custom breakpoint
      },
      borderRadius: {
        "4xl": "2rem",
      },
      spacing: {
        "128": "32rem",  // w-128 = 512px
      },
      animation: {
        "fade-in": "fadeIn 0.3s ease-out",
      },
      keyframes: {
        fadeIn: {
          "0%": { opacity: "0", transform: "translateY(-8px)" },
          "100%": { opacity: "1", transform: "translateY(0)" },
        },
      },
    },
  },
  plugins: [
    require("@tailwindcss/typography"),
    require("@tailwindcss/forms"),
    require("@tailwindcss/container-queries"),
  ],
};

/* globals.css — Tailwind v4 CSS-first configuration */
@import "tailwindcss";

@theme {
  /* Custom colors — exposed as var(--color-brand-500) */
  --color-brand-50:  #eff6ff;
  --color-brand-500: #3b82f6;
  --color-brand-900: #1e3a8a;
  --color-primary:   #6d28d9;

  /* Custom fonts */
  --font-sans: "Inter", system-ui, sans-serif;
  --font-mono: "Fira Code", monospace;

  /* Custom breakpoints */
  --breakpoint-3xl: 1920px;

  /* Custom spacing */
  --spacing-128: 32rem;
}

/* No tailwind.config.js needed! */
/* Custom variants */
@variant dark (&:where(.dark, .dark *));

/* Component styles using @apply */
@layer components {
  .btn-primary {
    @apply bg-brand-500 text-white px-4 py-2 rounded-lg
           hover:bg-brand-600 transition-colors;
  }
}

/* @apply: composing utilities into a CSS class */
@layer components {
  .prose-content h1 {
    @apply text-3xl font-bold text-gray-900 mb-4 mt-8;
  }
  .prose-content p {
    @apply text-gray-700 leading-relaxed mb-4;
  }
}

// Button component with cva (Class Variance Authority)
import { cva, type VariantProps } from "cva";
import { cn } from "@/lib/utils";

const buttonVariants = cva(
  // Base classes
  "inline-flex items-center justify-center rounded-md font-medium
   transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2
   disabled:opacity-50 disabled:pointer-events-none",
  {
    variants: {
      variant: {
        default:     "bg-blue-600 text-white hover:bg-blue-700",
        destructive: "bg-red-600 text-white hover:bg-red-700",
        outline:     "border border-gray-300 bg-white hover:bg-gray-50",
        ghost:       "hover:bg-gray-100 hover:text-gray-900",
        link:        "underline-offset-4 hover:underline text-blue-600",
      },
      size: {
        sm:      "h-8  px-3 text-sm",
        default: "h-10 px-4 py-2",
        lg:      "h-12 px-8 text-lg",
        icon:    "h-10 w-10",
      },
    },
    defaultVariants: {
      variant: "default",
      size: "default",
    },
  }
);

interface ButtonProps
  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
    VariantProps<typeof buttonVariants> {}

export function Button({ className, variant, size, ...props }: ButtonProps) {
  return (
    <button
      className={cn(buttonVariants({ variant, size }), className)}
      {...props}
    />
  );
}

// Usage — fully typed
<Button variant="outline" size="lg">Click me</Button>
<Button variant="destructive">Delete</Button>

/* Tailwind v4 — New 3D transform utilities */
<div class="rotate-x-45 rotate-y-12 perspective-500">
  3D rotated card
</div>

/* Text shadow and inset shadow (new in v4) */
<h1 class="text-shadow-lg text-shadow-black/20">
  Heading with text shadow
</h1>
<div class="inset-shadow-sm inset-shadow-black/10 rounded-lg">
  Inset shadow container
</div>

/* Container queries — @min and @max variants */
<div class="@container">
  <div class="@min-sm:grid-cols-2 @min-lg:grid-cols-3 grid gap-4">
    Responds to container width, not viewport
  </div>
</div>

/* @starting-style for entry animations */
.toast {
  opacity: 1;
  transform: translateY(0);
  transition: all 0.3s;

  @starting-style {
    opacity: 0;
    transform: translateY(1rem);
  }
}

# Run the automated migration tool
npx @tailwindcss/upgrade

# Install Tailwind v4 + PostCSS plugin
npm install tailwindcss@next @tailwindcss/postcss@next

/* Before (v3 globals.css) */
@tailwind base;
@tailwind components;
@tailwind utilities;

/* After (v4 globals.css) */
@import "tailwindcss";

/* Before (postcss.config.js v3) */
module.exports = {
  plugins: { tailwindcss: {}, autoprefixer: {} },
};

/* After (postcss.config.js v4) */
module.exports = {
  plugins: { "@tailwindcss/postcss": {} },
};

// Key class renames in v4
// shadow-sm   → shadow-xs
// shadow       → shadow-sm
// ring         → ring-1 (ring defaults to 1px now)
// overflow-ellipsis → text-ellipsis
// decoration-slice  → box-decoration-slice

# Create Next.js 14+ project with Tailwind (auto-configured)
npx create-next-app@latest my-app --typescript --tailwind

# Install cn utility dependencies
npm install clsx tailwind-merge

// lib/utils.ts — the cn() utility
import { clsx, type ClassValue } from "clsx";
import { twMerge } from "tailwind-merge";

export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs));
}

// Usage in a React component
import { cn } from "@/lib/utils";

interface CardProps {
  className?: string;
  highlighted?: boolean;
}

export function Card({ className, highlighted }: CardProps) {
  return (
    <div
      className={cn(
        "rounded-lg border bg-white p-6 shadow-sm",
        highlighted && "border-blue-500 ring-2 ring-blue-500/20",
        className  // consumer can override
      )}
    />
  );
}

# Initialize shadcn/ui in a Next.js + Tailwind project
npx shadcn@latest init

# Add components — code is copied to your project
npx shadcn@latest add button
npx shadcn@latest add card
npx shadcn@latest add dialog
npx shadcn@latest add dropdown-menu

// Usage — fully typed, Tailwind-styled
import { Button } from "@/components/ui/button";
import { Card, CardHeader, CardContent } from "@/components/ui/card";

export default function Page() {
  return (
    <Card className="max-w-md">
      <CardHeader>
        <h2 className="text-xl font-semibold">Plan</h2>
      </CardHeader>
      <CardContent>
        <p>Includes all features</p>
        <Button variant="default" size="lg" className="w-full mt-4">
          Get Started
        </Button>
      </CardContent>
    </Card>
  );
}

Does Tailwind CSS produce a large CSS bundle?

No — the JIT compiler generates only the CSS for classes you actually use. A typical Tailwind production bundle is 5–15KB gzipped, which is significantly smaller than Bootstrap (about 22KB) or other component frameworks. The unused class purging works by scanning your content files for class name strings and only generating CSS for found classes. With Tailwind v4, the engine is even more efficient and the content detection is automatic.

How do I handle class conflicts in Tailwind (e.g., p-4 and px-2 on the same element)?

In raw HTML, the last class in the stylesheet wins (not the last class in the HTML attribute). In React, use the tailwind-merge library (or the cn() utility from clsx + tailwind-merge). tailwind-merge intelligently resolves conflicts: cn("p-4 px-2") results in p-4 py-4 (px-2 overrides the horizontal part of p-4). This is especially important in component libraries where parent code passes className props that may conflict with internal defaults.

Does Tailwind CSS work with PurgeCSS?

Tailwind v3+ has built-in unused CSS removal through its JIT engine — you do not need to configure PurgeCSS separately. The content configuration in tailwind.config.js (v3) or the automatic detection in v4 tells Tailwind which files to scan. Tailwind's built-in purging is faster and more accurate than PurgeCSS for Tailwind classes because it understands the Tailwind class name format natively. For non-Tailwind CSS in the same project, you can still use PurgeCSS in your build pipeline.

Can I use Tailwind CSS without a build step?

Yes — Tailwind provides a standalone CLI executable and a CDN play version for prototyping. The CDN version (cdn.tailwindcss.com) generates all possible utilities on demand in the browser using the new v4 engine, which makes it suitable for demos and quick prototypes. However, for production, a build step is always recommended to generate a minimal, optimized CSS file. The Vite + Tailwind integration is the fastest build setup for new projects.

How do I customize Tailwind's color palette?

In Tailwind v3, extend colors in tailwind.config.js under theme.extend.colors. You can add new color names, override existing ones, or add additional shades. In Tailwind v4, define custom colors as CSS custom properties in your @theme block: --color-brand: #6d28d9 makes brand-500 available. The new v4 approach uses native CSS variables, so your custom colors are also accessible in JavaScript via getComputedStyle.

How does Tailwind CSS affect performance compared to hand-written CSS?

For runtime performance, Tailwind generates static CSS with no JavaScript overhead — it is as fast as any static CSS file. The utility classes avoid specificity issues that require !important overrides, making cascade management predictable. For large applications, Tailwind's small and consistent CSS bundle actually improves initial page load compared to growing bespoke stylesheets. The consistency of the design system also reduces the chance of one-off style experiments that grow CSS over time.

What is the difference between @apply and extracting a component?

@apply lets you compose Tailwind utilities into a CSS class. It is appropriate for styling third-party HTML content you cannot modify (like Markdown output or CMS content). For components you control (React/Vue/Svelte), it is almost always better to extract a component file — you get props-based variants, TypeScript types, co-located logic, and better IDE support. Overuse of @apply defeats the purpose of utility-first CSS and can lead to CSS that is hard to maintain.

Should I use Tailwind CSS v3 or v4 for a new project in 2025?

For new projects started in 2025, use Tailwind v4. The new CSS-first configuration model is simpler, the Oxide engine is dramatically faster, and v4 aligns better with modern CSS standards. If you are on an existing v3 project, the migration tool handles most breaking changes automatically. The ecosystem (shadcn/ui, Headless UI, plugins) has largely updated to support v4. The only reason to stay on v3 would be a strict dependency on a plugin that has not yet been updated for v4.

Tailwind CSS has earned its place as the most popular utility-first CSS framework for a reason: it is fast to write, predictable to debug, trivially tree-shakable, and deeply customizable. Whether you are building a simple landing page or a complex SaaS dashboard, Tailwind's constraints enforce consistency while its escape hatches (arbitrary values, CSS variables) handle any edge case. With Tailwind v4's CSS-first configuration and the Oxide engine, the developer experience has reached a new level of speed and simplicity. The combination of Next.js + Tailwind CSS + shadcn/ui + cva represents the most productive React styling stack available today.