Tailwind CSS 快速入门

什么是 Tailwind CSS？

Tailwind 是一个实用优先的 CSS 框架，通过组合现成的类名直接为 HTML 元素添加样式，无需手写 CSS。比如用 bg-blue-500 设置蓝色背景，text-white 设置白色文字。就像搭积木一样设计页面！

1. 安装 Tailwind CSS 🛠️

通过 npm 安装（推荐）

步骤：

  1. 确保已安装 Node.js
    在终端运行 node -v，若未安装，前往 Node.js 官网 下载。

  2. 初始化项目

    1
    2
    3
    mkdir my-project
    cd my-project
    npm init -y

  3. 安装 Tailwind 及其依赖

    1
    2
    npm install -D tailwindcss postcss autoprefixer
    npx tailwindcss init -p

    这会生成两个文件：tailwind.config.js 和 postcss.config.js。

2. 配置与基础使用 📂

配置模板路径

修改 tailwind.config.js，指定需要扫描 Tailwind 类的文件路径：

1
2
3
4
5
6
7
module.exports = {
	content: ["./src/**/*.{html,js}"], // 根据项目结构调整路径
	theme: {
		extend: {},
	},
	plugins: [],
};

创建 CSS 文件

在项目根目录新建 src/input.css，添加 Tailwind 指令：

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

编译 CSS

运行命令生成最终的 CSS 文件：

1
npx tailwindcss -i ./src/input.css -o ./dist/output.css --watch

这会实时监听文件变化，将样式输出到 dist/output.css。

3. 编写 HTML 🖋️

创建 index.html 并引入编译后的 CSS：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<meta
			name="viewport"
			content="width=device-width, initial-scale=1.0" />
		<link
			href="/dist/output.css"
			rel="stylesheet" />
	</head>
	<body>
		<!-- 示例：一个带阴影的蓝色按钮 -->
		<button
			class="px-4 py-2 bg-blue-500 text-white rounded-lg shadow-md hover:bg-blue-600">
			点击我
		</button>
	</body>
</html>

4. 核心概念 🔑

实用类命名规则

  • 尺寸：{属性}-{值}，如 w-64（宽度 16rem）、p-4（内边距 1rem）。
  • 颜色：{属性}-{颜色}-{深浅}，如 bg-red-300、text-gray-800。
  • 响应式：添加断点前缀，如 md:text-center（中屏幕时居中）。
  • 悬停状态：hover: 前缀，如 hover:bg-green-500。

常用实用类示例

1. Flexbox 布局

使用 flex 类快速启用弹性布局。

  • 示例：
    1
    2
    3
    <div class="flex justify-center items-center h-screen">
    	<p>居中对齐的内容</p>
    </div>
    • flex：启用弹性布局。
    • justify-center：水平居中。
    • items-center：垂直居中。
    • h-screen：高度占满整个屏幕。

2. 网格布局

使用 grid 类快速启用网格布局。

  • 示例：
    1
    2
    3
    4
    5
    <div class="grid grid-cols-3 gap-4">
    	<div class="bg-blue-500">1</div>
    	<div class="bg-blue-500">2</div>
    	<div class="bg-blue-500">3</div>
    </div>
    • grid：启用网格布局。
    • grid-cols-3：定义 3 列网格。
    • gap-4：设置网格项之间的间距为 1rem。

3. 间距控制

使用 m-{值} 和 p-{值} 控制外边距和内边距。

  • 示例：
    1
    2
    3
    <div class="m-4 p-6 bg-gray-200">
    	<p>带内外边距的内容</p>
    </div>
    • m-4：设置外边距为 1rem。
    • p-6：设置内边距为 1.5rem。

4. 文本样式

使用 text-{值} 和 font-{值} 控制文本样式。

  • 示例：
    1
    <p class="text-xl font-bold text-gray-700">加粗的大号文本</p>
    • text-xl：设置文本大小为 1.25rem。
    • font-bold：设置字体加粗。
    • text-gray-700：设置文本颜色为灰色（深度 700）。

5. 背景样式

使用 bg-{颜色} 和 bg-{模式} 设置背景样式。

  • 示例：
    1
    2
    3
    <div class="bg-gradient-to-r from-blue-500 to-green-500 p-4">
    	<p>渐变背景</p>
    </div>
    • bg-gradient-to-r：设置从左到右的渐变背景。
    • from-blue-500：渐变起始颜色为蓝色。
    • to-green-500：渐变结束颜色为绿色。

6. 边框样式

使用 border 和 rounded-{值} 设置边框和圆角。

  • 示例：
    1
    2
    3
    <div class="border border-gray-400 rounded-lg p-4">
    	<p>带边框和圆角的内容</p>
    </div>
    • border：启用边框。
    • border-gray-400：设置边框颜色为灰色（深度 400）。
    • rounded-lg：设置大圆角。

7. 阴影效果

使用 shadow-{值} 添加阴影效果。

  • 示例：
    1
    2
    3
    <div class="shadow-lg p-4 bg-white">
    	<p>带阴影的内容</p>
    </div>
    • shadow-lg：设置大阴影效果。

8. 透明度

使用 opacity-{值} 设置透明度。

  • 示例：
    1
    2
    3
    <div class="opacity-50 bg-black text-white p-4">
    	<p>半透明背景</p>
    </div>
    • opacity-50：设置透明度为 50%。

9. 动画效果

使用 transition 和 duration-{值} 设置过渡动画。

  • 示例：
    1
    2
    3
    4
    <button
    	class="bg-blue-500 text-white px-4 py-2 rounded-lg transition duration-300 hover:bg-blue-600">
    	悬停按钮
    </button>
    • transition：启用过渡效果。
    • duration-300：设置过渡持续时间为 300ms。
    • hover:bg-blue-600：悬停时背景变为深蓝色。

10. 响应式设计

Tailwind 提供了强大的响应式工具，通过断点前缀轻松实现不同屏幕尺寸的样式调整。

  • 断点前缀：

    • sm:：适用于小屏幕（默认最小宽度 640px）。
    • md:：适用于中屏幕（默认最小宽度 768px）。
    • lg:：适用于大屏幕（默认最小宽度 1024px）。
    • xl:：适用于超大屏幕（默认最小宽度 1280px）。
    • 2xl:：适用于超超大屏幕（默认最小宽度 1536px）。

  • 示例：响应式布局

    1
    2
    3
    4
    5
    6
    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
    	<div class="bg-blue-500">1</div>
    	<div class="bg-blue-500">2</div>
    	<div class="bg-blue-500">3</div>
    	<div class="bg-blue-500">4</div>
    </div>
    • grid-cols-1：默认单列布局。
    • sm:grid-cols-2：小屏幕时切换为两列布局。
    • lg:grid-cols-4：大屏幕时切换为四列布局。

  • 示例：响应式文本样式

    1
    2
    3
    <p class="text-sm sm:text-base md:text-lg lg:text-xl xl:text-2xl">
    	根据屏幕大小调整文字大小
    </p>
    • text-sm：默认小文字。
    • sm:text-base：小屏幕时文字变为基础大小。
    • md:text-lg：中屏幕时文字变大。
    • lg:text-xl：大屏幕时文字更大。
    • xl:text-2xl：超大屏幕时文字最大。

  • 示例：隐藏元素

    1
    2
    3
    <div class="hidden sm:block">
    	<p>仅在小屏幕及以上显示</p>
    </div>
    • hidden：默认隐藏。
    • sm:block：小屏幕及以上显示为块级元素。

通过这些工具，可以轻松实现响应式设计，适配各种设备屏幕。

5. Tailwind 与框架集成

Tailwind CSS 可以轻松集成到各种前端框架中，以下是一些常见的集成方式：

与 React 集成

  1. 安装依赖
    确保项目已初始化并安装 Tailwind：

    1
    2
    npm install -D tailwindcss postcss autoprefixer
    npx tailwindcss init -p

  2. 配置模板路径
    修改 tailwind.config.js，添加 React 文件路径：

    1
    2
    3
    4
    5
    6
    7
    module.exports = {
    	content: ["./src/**/*.{js,jsx,ts,tsx}"], // 扫描 React 文件
    	theme: {
    		extend: {},
    	},
    	plugins: [],
    };

  3. 创建 CSS 文件
    在 src 目录下创建 index.css，添加 Tailwind 指令：

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

  4. 引入 CSS 文件
    在 src/index.js 中引入：

    1
    import "./index.css";

  5. 使用 Tailwind 类
    在组件中直接使用 Tailwind 类名：

    1
    2
    3
    4
    5
    6
    7
    function App() {
    	return (
    		<div className="flex justify-center items-center h-screen">
    			<h1 className="text-3xl font-bold">Hello, Tailwind!</h1>
    		</div>
    	);
    }

与 Vue 集成

  1. 安装依赖
    确保项目已初始化并安装 Tailwind：

    1
    2
    npm install -D tailwindcss postcss autoprefixer
    npx tailwindcss init -p

  2. 配置模板路径
    修改 tailwind.config.js，添加 Vue 文件路径：

    1
    2
    3
    4
    5
    6
    7
    module.exports = {
    	content: ["./src/**/*.{vue,js,ts,jsx,tsx}"], // 扫描 Vue 文件
    	theme: {
    		extend: {},
    	},
    	plugins: [],
    };

  3. 创建 CSS 文件
    在 src/assets 目录下创建 tailwind.css，添加 Tailwind 指令：

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

  4. 引入 CSS 文件
    在 main.js 中引入：

    1
    import "./assets/tailwind.css";

  5. 使用 Tailwind 类
    在 Vue 模板中直接使用 Tailwind 类名：

    1
    2
    3
    4
    5
    <template>
    	<div class="flex justify-center items-center h-screen">
    		<h1 class="text-3xl font-bold">Hello, Tailwind!</h1>
    	</div>
    </template>

6. 高级技巧 🚀

自定义样式

在 tailwind.config.js 中扩展主题：

1
2
3
4
5
6
7
8
9
10
theme: {
  extend: {
    colors: {
      primary: '#FF6363', // 添加自定义颜色
    },
    fontFamily: {
      sans: ['Inter', 'sans-serif'], // 修改默认字体
    },
  },
},

提取重复样式

使用 @apply 将常用类组合成新类（在 CSS 文件中）：

1
2
3
4
5
6
.btn-primary {
	@apply px-4 py-2 bg-blue-500 text-white rounded-lg transition-colors;
}
.btn-primary:hover {
	@apply bg-blue-600;
}

生产环境优化

移除未使用的样式：在 tailwind.config.js 中启用 PurgeCSS（Tailwind v3+ 自动启用）：

1
2
3
4
module.exports = {
	content: ["./src/**/*.{html,js}"], // 确保正确配置扫描路径
	// ...
};

7. 学习资源 📚

  • 官方文档：Tailwind CSS 文档（最权威的指南）
  • 交互式教程：Tailwind Play（边改边看效果）
  • UI 组件库：Tailwind Components（直接复用精美组件）
  • 视频教程：YouTube 搜索 “Tailwind CSS Tutorial”（推荐 Traversy Media 的教程）