Tailwind CSS is a utility-first CSS framework. It provides a large set of atomic utility classes so developers can compose styles directly in HTML without writing custom CSS. This article explores Tailwind CSS from scratch and looks at the atomic-CSS development model.

What Is Atomic CSS

The traditional way of writing CSS is to create semantic class names for each component:

<!-- 传统方式 -->
<div class="card">
  <img class="card-image" src="photo.jpg" />
  <div class="card-body">
    <h3 class="card-title">标题</h3>
    <p class="card-text">描述文字</p>
  </div>
</div>

<style>
.card { border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); }
.card-image { width: 100%; height: 200px; object-fit: cover; }
.card-body { padding: 16px; }
.card-title { font-size: 18px; font-weight: 600; margin-bottom: 8px; }
.card-text { font-size: 14px; color: #666; line-height: 1.5; }
</style>

Atomic CSS composes styles from small, predefined class names:

<!-- Tailwind 方式 -->
<div class="rounded-lg shadow-md">
  <img class="w-full h-48 object-cover" src="photo.jpg" />
  <div class="p-4">
    <h3 class="text-lg font-semibold mb-2">标题</h3>
    <p class="text-sm text-gray-600 leading-relaxed">描述文字</p>
  </div>
</div>

Installation and Configuration

npm install tailwindcss

Initialize the config file:

npx tailwindcss init

// tailwind.config.js
module.exports = {
  theme: {
    // 自定义设计 tokens
    colors: {
      primary: '#3498db',
      secondary: '#2ecc71',
      danger: '#e74c3c',
      gray: {
        100: '#f7fafc',
        200: '#edf2f7',
        300: '#e2e8f0',
        400: '#cbd5e0',
        500: '#a0aec0',
        600: '#718096',
        700: '#4a5568',
        800: '#2d3748',
        900: '#1a202c',
      },
    },
    spacing: {
      '0': '0',
      '1': '4px',
      '2': '8px',
      '3': '12px',
      '4': '16px',
      '5': '20px',
      '6': '24px',
      '8': '32px',
      '10': '40px',
      '12': '48px',
      '16': '64px',
    },
    // 扩展默认配置
    extend: {
      fontFamily: {
        sans: ['"PingFang SC"', '"Microsoft YaHei"', 'sans-serif'],
      },
    },
  },
  variants: {},
  plugins: [],
};

Create the CSS entry file:

/* src/styles/tailwind.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

# 编译
npx tailwindcss src/styles/tailwind.css -o dist/tailwind.css

Quick Reference: Utility Classes

Layout

<!-- Flexbox -->
<div class="flex items-center justify-between">
  <span>左</span>
  <span>右</span>
</div>

<!-- Grid -->
<div class="grid grid-cols-3 gap-4">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

<!-- 定位 -->
<div class="relative">
  <div class="absolute top-0 right-0">角标</div>
</div>

Spacing

<!-- padding: p-4 (16px), px-4 (左右), py-4 (上下), pt-4 (上) -->
<div class="p-4 px-6 py-3 pt-2">

<!-- margin: m-4, mx-auto (水平居中), mt-4 -->
<div class="m-4 mx-auto mt-2">

Typography and Color

<!-- 字号: text-xs (12px), text-sm (14px), text-base (16px), text-lg (18px) -->
<!-- 字重: font-normal (400), font-medium (500), font-semibold (600), font-bold (700) -->
<h1 class="text-2xl font-bold text-gray-900">大标题</h1>
<p class="text-sm text-gray-600">正文内容</p>

Responsive

<!-- sm: 640px, md: 768px, lg: 1024px, xl: 1280px -->
<div class="w-full md:w-1/2 lg:w-1/3">
  响应式宽度
</div>

<!-- 响应式显示/隐藏 -->
<div class="hidden md:block">
  768px 以上显示
</div>
<div class="block md:hidden">
  768px 以下显示
</div>

Hover / Focus States

<button class="bg-blue-500 hover:bg-blue-700 text-white px-4 py-2 rounded
               focus:outline-none focus:ring-2 focus:ring-blue-300">
  点击我
</button>

Extracting Component Classes with @apply

When a set of utility classes needs to be reused, you can extract them into component classes with @apply:

/* styles/components.css */
@layer components {
  .btn {
    @apply px-4 py-2 rounded font-medium transition-colors duration-200;
  }

  .btn-primary {
    @apply bg-blue-500 text-white hover:bg-blue-700;
  }

  .btn-secondary {
    @apply bg-gray-200 text-gray-800 hover:bg-gray-300;
  }

  .card {
    @apply bg-white rounded-lg shadow-md overflow-hidden;
  }

  .input {
    @apply w-full px-3 py-2 border border-gray-300 rounded-md
           focus:outline-none focus:ring-2 focus:ring-blue-500
           focus:border-transparent;
  }
}

<button class="btn btn-primary">主要按钮</button>
<button class="btn btn-secondary">次要按钮</button>

Usage in React

// Button.jsx
function Button({ variant = 'primary', size = 'md', children, ...props }) {
  const baseClasses = 'font-medium rounded transition-colors focus:outline-none focus:ring-2';

  const variants = {
    primary: 'bg-blue-500 text-white hover:bg-blue-700 focus:ring-blue-300',
    secondary: 'bg-gray-200 text-gray-800 hover:bg-gray-300 focus:ring-gray-300',
    danger: 'bg-red-500 text-white hover:bg-red-700 focus:ring-red-300',
  };

  const sizes = {
    sm: 'px-3 py-1 text-sm',
    md: 'px-4 py-2 text-base',
    lg: 'px-6 py-3 text-lg',
  };

  const className = `${baseClasses} ${variants[variant]} ${sizes[size]}`;

  return (
    <button className={className} {...props}>
      {children}
    </button>
  );
}

// 使用
function App() {
  return (
    <div className="p-8 space-y-4">
      <Button variant="primary" size="lg">大号主要按钮</Button>
      <Button variant="danger" size="sm">小号危险按钮</Button>
    </div>
  );
}

Comparison with BEM

<!-- BEM: 需要维护 CSS 文件，命名规则严格 -->
<button class="btn btn--primary btn--large">按钮</button>

<style>
.btn { /* 基础样式 */ }
.btn--primary { /* 主要变体 */ }
.btn--large { /* 大号尺寸 */ }
</style>

<!-- Tailwind: 不需要写 CSS，直接在 HTML 中组合 -->
<button class="bg-blue-500 text-white px-6 py-3 text-lg rounded hover:bg-blue-700">
  按钮
</button>

Pros and Cons

Pros

1. Fast development: no need to invent class names or switch between CSS and HTML
2. CSS that doesn't grow: only the utilities you actually use are generated
3. Easy responsiveness: the prefix syntax md:, lg: is very intuitive
4. Consistency: a built-in design system standardizes spacing, colors, font sizes, and more
5. Easy to refactor: removing an HTML element leaves no orphaned CSS behind

Cons

1. Learning curve: you have to memorize a large number of class names
2. HTML readability: long class lists can hurt HTML readability
3. Not ideal for complex components: highly customized components still need custom CSS
4. Team buy-in: the team needs to embrace the atomic-CSS philosophy

Build Optimization

// tailwind.config.js - 生产环境优化
module.exports = {
  purge: [
    './src/**/*.{js,jsx,ts,tsx}',
    './public/index.html',
  ],
  theme: {},
  variants: {},
  plugins: [],
};

Once purge is enabled, Tailwind strips unused classes from the production build, shrinking the CSS from 3 MB+ down to under 10 KB.

Summary

• Tailwind CSS is a utility-first framework that ships a large set of atomic utility classes
• Compose styles directly in HTML/JSX without writing custom CSS
• @apply extracts common combinations into component classes
• Responsive and state modifiers use the prefix syntax (md:, hover:)
• The purge config dramatically reduces production CSS size
• Great for rapid prototyping and team collaboration
• Requires team consensus to adopt the atomic-CSS way of working