Tailwind CSS 是一个实用优先（Utility-First）的 CSS 框架，通过组合大量预定义的工具类来快速构建界面。

为什么选择 Tailwind

特性 说明
开发效率高 直接在 HTML 中应用样式，无需切换文件
高度可定制 通过配置文件自定义设计系统
响应式设计 内置响应式前缀，如 md: lg:
文件体积小 生产环境自动移除未使用的 CSS

快速开始

安装

1
2
npm install -D tailwindcss
npx tailwindcss init

配置文件

tailwind.config.js：

1
2
3
4
5
6
7
8
9
10
11
module.exports = {
  content: ['./src/**/*.{js,jsx,ts,tsx,html}'],  // 扫描路径
  theme: {
    extend: {
      colors: {
        primary: '#3B82F6',  // 自定义颜色
      }
    },
  },
  plugins: [],
}

引入样式

在 CSS 文件中：

1
2
3
4
/* styles.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

基本使用

常用工具类

1
2
3
4
<!-- 背景色 + 文字颜色 + 内边距 + 圆角 -->
<div class="bg-blue-500 text-white p-4 rounded">
  Hello, Tailwind!
</div>
类名 作用
bg-blue-500 背景色
text-white 文字颜色
p-4 内边距 1rem
rounded 圆角
shadow-md 阴影

响应式设计

1
2
3
4
<!-- 手机 4 padding，平板 8，桌面 12 -->
<div class="p-4 md:p-8 lg:p-12">
  Responsive Padding
</div>

断点说明：

前缀 最小宽度 设备
sm 640px 手机横屏
md 768px 平板
lg 1024px 笔记本
xl 1280px 桌面
2xl 1536px 大屏

状态变体

1
2
3
4
<!-- Hover、Focus 状态 -->
<button class="bg-blue-500 hover:bg-blue-700 focus:ring-2 focus:ring-blue-300">
  Button
</button>

常用状态：

  • hover: - 鼠标悬停
  • focus: - 获得焦点
  • active: - 激活状态
  • disabled: - 禁用状态

在 React 中使用

创建项目

1
2
3
4
npx create-react-app my-app
cd my-app
npm install -D tailwindcss
npx tailwindcss init

配置

tailwind.config.js：

1
2
3
4
5
6
7
8
9
module.exports = {
  content: [
    "./src/**/*.{js,jsx,ts,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

引入样式

src/index.css：

1
2
3
@tailwind base;
@tailwind components;
@tailwind utilities;

src/index.js：

1
import './index.css';

示例组件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
const App = () => {
  return (
    <div className="min-h-screen bg-gray-100 flex items-center justify-center">
      <div className="bg-white p-8 rounded-lg shadow-md max-w-md">
        <h1 className="text-2xl font-bold mb-4 text-gray-800">
          Hello, Tailwind!
        </h1>
        <p className="text-gray-600">
          使用 Tailwind CSS 构建现代化界面
        </p>
        <button className="mt-4 bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
          Get Started
        </button>
      </div>
    </div>
  );
};

常用布局模式

Flexbox 布局

1
2
3
4
5
6
7
8
9
10
<!-- 水平居中 -->
<div class="flex items-center justify-center">
  Content
</div>

<!-- 垂直布局 -->
<div class="flex flex-col gap-4">
  <div>Item 1</div>
  <div>Item 2</div>
</div>

Grid 布局

1
2
3
4
5
6
7
8
9
10
11
<!-- 3 列网格 -->
<div class="grid grid-cols-3 gap-4">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

<!-- 响应式网格 -->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
  <!-- 手机 1 列，平板 2 列，桌面 3 列 -->
</div>

自定义组件

提取重复样式到组件类：

styles.css：

1
2
3
4
5
@layer components {
  .btn-primary {
    @apply bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded;
  }
}

使用：

1
2
3
<button class="btn-primary">
  Primary Button
</button>

优化生产环境

移除未使用的 CSS

Tailwind 会自动扫描 content 中配置的文件，生产构建时只包含用到的类。

压缩 CSS

在生产环境中 Tailwind 会自动压缩 CSS。

实用技巧

暗黑模式

1
2
3
4
5
// tailwind.config.js
module.exports = {
  darkMode: 'class',  // 或 'media'
  // ...
}

使用：

1
2
3
<div class="bg-white dark:bg-gray-800 text-gray-900 dark:text-white">
  Content
</div>

任意值

1
2
3
4
<!-- 使用自定义值 -->
<div class="w-[137px] top-[117px] bg-[#1da1f2]">
  Custom values
</div>

学习资源

注意事项

  • 类名较长，建议使用编辑器的 IntelliSense 插件
  • 不要在运行时动态拼接类名（会被 PurgeCSS 移除）
  • 复杂组件建议提取为独立的组件类