Tailwind CSS 实用技巧

Tailwind CSS 简介

Tailwind CSS 是一个实用优先的 CSS 框架，它提供了大量的工具类，让你可以直接在 HTML 中构建自定义设计。

与传统的 CSS 框架不同，Tailwind 不提供预定义的组件，而是提供底层的工具类，让你能够快速构建任何设计。

为什么选择 Tailwind？

开发速度快 - 不用离开 HTML 就能完成样式编写
易于维护 - 样式和结构在一起，一目了然
包体积小 - 自动移除未使用的 CSS
高度可定制 - 通过配置文件自定义设计系统
响应式设计 - 内置响应式修饰符

实用技巧

1. 响应式设计

Tailwind 使用移动优先的断点系统：

<!-- 移动端 1 列，平板 2 列，桌面 3 列 -->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
  <div class="bg-white p-4 rounded-lg shadow">
    卡片 1
  </div>
  <div class="bg-white p-4 rounded-lg shadow">
    卡片 2
  </div>
  <div class="bg-white p-4 rounded-lg shadow">
    卡片 3
  </div>
</div>

2. 暗色模式

使用 dark: 前缀实现暗色模式：

<div class="bg-white dark:bg-gray-900 text-gray-900 dark:text-white">
  <h1 class="text-2xl font-bold">标题</h1>
  <p class="text-gray-600 dark:text-gray-300">
    这段文字在亮色模式下是深灰色，在暗色模式下是浅灰色。
  </p>
</div>

3. 悬停效果

<button class="
  bg-blue-500 hover:bg-blue-600
  text-white
  px-6 py-3
  rounded-lg
  transition-colors duration-200
  focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2
">
  点击我
</button>

4. Flexbox 布局

<!-- 水平居中 -->
<div class="flex items-center justify-center h-screen">
  <div class="text-center">
    <h1 class="text-4xl font-bold">居中内容</h1>
    <p class="mt-4 text-gray-600">描述文字</p>
  </div>
</div>

<!-- 两端对齐 -->
<div class="flex items-center justify-between p-4 bg-white">
  <span>左侧内容</span>
  <span>右侧内容</span>
</div>

5. Grid 布局

<!-- 网格布局 -->
<div class="grid grid-cols-3 gap-6">
  <div class="col-span-2 bg-blue-100 p-4">主要内容</div>
  <div class="bg-green-100 p-4">侧边栏</div>
</div>

<!-- 自动填充网格 -->
<div class="grid grid-cols-[repeat(auto-fill,minmax(250px,1fr))] gap-4">
  <!-- 自动填充的卡片 -->
</div>

自定义配置

在 tailwind.config.ts 中自定义：

import type { Config } from 'tailwindcss';

const config: Config = {
  content: [
    './app/**/*.{js,ts,jsx,tsx}',
    './components/**/*.{js,ts,jsx,tsx}',
  ],
  darkMode: 'class',
  theme: {
    extend: {
      colors: {
        primary: {
          50: '#eff6ff',
          100: '#dbeafe',
          200: '#bfdbfe',
          300: '#93c5fd',
          400: '#60a5fa',
          500: '#3b82f6',
          600: '#2563eb',
          700: '#1d4ed8',
          800: '#1e40af',
          900: '#1e3a8a',
        },
      },
      fontFamily: {
        sans: ['Inter', 'sans-serif'],
        mono: ['Fira Code', 'monospace'],
      },
      spacing: {
        '128': '32rem',
        '144': '36rem',
      },
    },
  },
  plugins: [],
};

export default config;

最佳实践

提取组件 - 重复的样式组合提取为组件
使用 @apply - 在 CSS 文件中复用工具类
遵循设计系统 - 使用一致的间距和颜色
移动优先 - 先写移动端样式，再用响应式修饰符扩展
使用 JIT 模式 - 即时生成 CSS，减少包体积

示例：卡片组件

function Card({
  title,
  children,
  variant = 'default'
}: {
  title: string;
  children: React.ReactNode;
  variant?: 'default' | 'outlined' | 'elevated';
}) {
  const baseStyles = 'rounded-xl p-6 transition-all duration-200';
  const variantStyles = {
    default: 'bg-white dark:bg-gray-800 shadow-sm',
    outlined: 'bg-transparent border-2 border-gray-200 dark:border-gray-700',
    elevated: 'bg-white dark:bg-gray-800 shadow-lg hover:shadow-xl',
  };

  return (
    <div className={`${baseStyles} ${variantStyles[variant]}`}>
      <h3 className="text-xl font-semibold mb-4 text-gray-900 dark:text-white">
        {title}
      </h3>
      <div className="text-gray-600 dark:text-gray-300">
        {children}
      </div>
    </div>
  );
}

常用工具类速查

类别	工具类	说明
间距	`p-4`, `m-4`, `gap-4`	内边距、外边距、间隙
排版	`text-xl`, `font-bold`, `text-center`	字体大小、粗细、对齐
颜色	`bg-blue-500`, `text-white`	背景色、文字色
布局	`flex`, `grid`, `hidden`	Flexbox、Grid、隐藏
响应式	`md:`, `lg:`, `xl:`	断点修饰符

Tailwind CSS 让样式编写变得高效而愉快。如果你还没尝试过，强烈推荐！