Tailwind CSS 实战指南

Dec 2, 2025

foxgem

Tailwind CSS 是一个原子化的 CSS 框架，它通过提供大量的工具类来构建现代网页界面。本文将带你深入了解 Tailwind 的核心概念和实战技巧。

为什么选择 Tailwind CSS？

传统 CSS 的痛点

/* 传统方式：命名困难，样式分散 */
.card {
  background-color: white;
  border-radius: 8px;
  padding: 16px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.card-title {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 8px;
}

Tailwind 的解决方案

<!-- Tailwind: 直接在 HTML 中描述样式 -->
<div class="bg-white rounded-lg p-4 shadow-md">
  <h2 class="text-lg font-bold mb-2">标题</h2>
</div>

核心概念

1. 间距系统 (Spacing)

Tailwind 使用 4px 为基础单位：

类名	大小
`p-1`	4px
`p-2`	8px
`p-4`	16px
`p-8`	32px

<div class="p-4 m-2 space-y-4">
  <!-- padding: 16px, margin: 8px, 子元素垂直间距: 16px -->
</div>

2. 响应式设计

Tailwind 采用移动优先的响应式设计：

<div class="
  w-full        /* 默认：100% 宽度 */
  md:w-1/2      /* 中等屏幕：50% 宽度 */
  lg:w-1/3      /* 大屏幕：33% 宽度 */
">
  响应式容器
</div>

断点定义：

sm: 640px
md: 768px
lg: 1024px
xl: 1280px
2xl: 1536px

3. Flexbox 与 Grid

<!-- Flexbox 布局 -->
<div class="flex items-center justify-between gap-4">
  <div>左侧</div>
  <div>右侧</div>
</div>

<!-- Grid 布局 -->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</div>

实战：构建组件

响应式导航栏

<nav class="bg-slate-900 text-white">
  <div class="max-w-6xl mx-auto px-4">
    <div class="flex items-center justify-between h-16">
      <!-- Logo -->
      <a href="/" class="text-xl font-bold">
        Brand
      </a>
      
      <!-- 桌面端菜单 -->
      <div class="hidden md:flex space-x-8">
        <a href="#" class="hover:text-blue-400 transition-colors">首页</a>
        <a href="#" class="hover:text-blue-400 transition-colors">产品</a>
        <a href="#" class="hover:text-blue-400 transition-colors">关于</a>
      </div>
      
      <!-- 移动端菜单按钮 -->
      <button class="md:hidden p-2">
        <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"/>
        </svg>
      </button>
    </div>
  </div>
</nav>

卡片组件

<div class="bg-white rounded-xl shadow-lg overflow-hidden
            hover:shadow-xl transition-shadow duration-300
            dark:bg-slate-800 dark:text-white">
  <img src="image.jpg" alt="" class="w-full h-48 object-cover">
  
  <div class="p-6">
    <span class="inline-block px-3 py-1 text-sm font-semibold 
                 text-blue-600 bg-blue-100 rounded-full mb-4">
      标签
    </span>
    
    <h3 class="text-xl font-bold mb-2">卡片标题</h3>
    
    <p class="text-gray-600 dark:text-gray-300 mb-4">
      这是卡片的描述文字，介绍相关内容。
    </p>
    
    <button class="w-full py-2 px-4 bg-blue-600 text-white rounded-lg
                   hover:bg-blue-700 transition-colors">
      了解更多
    </button>
  </div>
</div>

自定义配置

tailwind.config.js

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ['./src/**/*.{html,js,jsx,tsx}'],
  theme: {
    extend: {
      // 自定义颜色
      colors: {
        primary: {
          50: '#eff6ff',
          500: '#3b82f6',
          600: '#2563eb',
          700: '#1d4ed8',
        },
        brand: '#ff6b6b',
      },
      // 自定义字体
      fontFamily: {
        sans: ['Inter', 'sans-serif'],
        display: ['Lexend', 'sans-serif'],
      },
      // 自定义动画
      animation: {
        'fade-in': 'fadeIn 0.5s ease-in-out',
        'slide-up': 'slideUp 0.3s ease-out',
      },
      keyframes: {
        fadeIn: {
          '0%': { opacity: '0' },
          '100%': { opacity: '1' },
        },
        slideUp: {
          '0%': { transform: 'translateY(10px)', opacity: '0' },
          '100%': { transform: 'translateY(0)', opacity: '1' },
        },
      },
    },
  },
  plugins: [
    require('@tailwindcss/forms'),
    require('@tailwindcss/typography'),
  ],
}

性能优化技巧

1. 使用 @apply 提取重复样式

/* 在 CSS 文件中 */
@layer components {
  .btn-primary {
    @apply py-2 px-4 bg-blue-600 text-white rounded-lg
           hover:bg-blue-700 transition-colors font-medium;
  }
  
  .input-field {
    @apply w-full px-4 py-2 border border-gray-300 rounded-lg
           focus:ring-2 focus:ring-blue-500 focus:border-transparent;
  }
}

2. 生产环境优化

Tailwind 4.0 默认使用 JIT 模式，只打包使用到的样式：

// vite.config.js
import tailwindcss from '@tailwindcss/vite'

export default {
  plugins: [tailwindcss()],
}

与 React 集成

条件样式

function Button({ variant = 'primary', children }) {
  const baseStyles = 'px-4 py-2 rounded-lg font-medium transition-colors';
  
  const variants = {
    primary: 'bg-blue-600 text-white hover:bg-blue-700',
    secondary: 'bg-gray-200 text-gray-800 hover:bg-gray-300',
    danger: 'bg-red-600 text-white hover:bg-red-700',
  };
  
  return (
    <button className={`${baseStyles} ${variants[variant]}`}>
      {children}
    </button>
  );
}

使用 clsx 处理复杂类名

import clsx from 'clsx';

function Alert({ type, children }) {
  return (
    <div className={clsx(
      'p-4 rounded-lg',
      {
        'bg-green-100 text-green-800': type === 'success',
        'bg-red-100 text-red-800': type === 'error',
        'bg-yellow-100 text-yellow-800': type === 'warning',
      }
    )}>
      {children}
    </div>
  );
}

总结

拥抱原子化 - 直接在 HTML 中描述样式
移动优先 - 从小屏幕开始，逐步增强
善用配置 - 根据设计系统自定义主题
组件提取 - 使用 @apply 或组件化提取重复样式
性能优化 - JIT 模式确保只打包使用的样式

Tailwind CSS 改变了我们编写 CSS 的方式，让样式开发变得更加高效和愉快。