Tailwind CSS Guide — Utility-First CSS Without Writing Custom CSS

What Is Tailwind CSS?

Tailwind is a utility-first CSS framework — instead of writing custom CSS classes, you compose tiny utility classes directly in your HTML. class="flex items-center gap-4 p-6 bg-white rounded-xl shadow-md" replaces five separate CSS declarations.

The key insight: you stop context-switching between HTML and CSS files. All styling decisions are visible right where the element is defined.

Core Utilities

<!-- Layout -->
<div class="flex items-center justify-between gap-4">
<div class="grid grid-cols-3 gap-6">

<!-- Spacing -->
<div class="p-4 px-6 py-3 m-2 mt-8 mb-4">

<!-- Typography -->
<p class="text-lg font-semibold text-gray-900 leading-relaxed">
<h1 class="text-4xl font-bold tracking-tight">

<!-- Colors -->
<div class="bg-blue-500 text-white border border-blue-600">

<!-- Sizing -->
<div class="w-full max-w-2xl h-16 min-h-screen">

Responsive Design

Prefix any utility with a breakpoint to apply it at that screen size and above:

<div class="
  grid
  grid-cols-1           <!-- mobile: 1 column -->
  md:grid-cols-2        <!-- tablet: 2 columns -->
  lg:grid-cols-3        <!-- desktop: 3 columns -->
  gap-6
">

Breakpoints: sm (640px), md (768px), lg (1024px), xl (1280px), 2xl (1536px). All are mobile-first.

Dark Mode

<div class="bg-white dark:bg-gray-900 text-gray-900 dark:text-gray-100">
  <p class="text-sm text-gray-600 dark:text-gray-400">
    Automatically adapts to OS preference
  </p>
</div>

Enable dark mode in tailwind.config.js: darkMode: 'class' to toggle via JS, or 'media' to follow the OS preference.

Customizing the Theme

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        brand: {
          50: '#f0fdf4',
          500: '#22c55e',
          900: '#14532d',
        },
      },
      fontFamily: {
        sans: ['Inter', 'system-ui', 'sans-serif'],
      },
    },
  },
}

Frequently Asked Questions

Does Tailwind result in large CSS files?

No. Tailwind scans your source files and only includes the utilities you actually use. Production builds are typically 5-20KB gzipped. The development build is large, but is never shipped.

How do I avoid repeating the same long class strings?

Extract components — in React/Vue/Svelte, create a reusable component with the classes baked in. For plain HTML, use Tailwind's @apply directive in a CSS file to create semantic class names from utilities.