Tailwind CSS 是一个 实用优先（Utility-First） 的 CSS 框架，它提供了一组低级别的原子类（Utility Classes），允许开发者通过组合这些类来快速构建自定义设计，而无需编写传统的手写 CSS。
一. 安装 Tailwind CSS
通过 npm/yarn/pnpm 安装
```
```
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init
二. 配置 Tailwind
1.tailwind.config.js
tailwind.config.js的大致内容如下：
```
```module.exports = {
content: ["./src/**/*.{html,js,vue,jsx,tsx}"], // 指定哪些文件需要扫描 Tailwind 类
theme: {
extend: {}, // 可自定义颜色、间距等
},
plugins: [], // 可添加插件
};
(1) darkMode: ["class"]（外加）
- 表示使用 类名切换暗黑模式（如
<html class="dark">）。 - 默认情况下，Tailwind 会根据系统偏好自动切换，但这里强制使用
class控制。
(2) content
指定哪些文件会用到 Tailwind 的类名（避免未使用的样式被打包）：
```
```
content: [
"./app/**/*.{js,ts,jsx,tsx,mdx}", // app 目录下的所有 JS/TS/JSX/TSX/MDX 文件
"./pages/**/*.{js,ts,jsx,tsx,mdx}", // pages 目录下的文件
"./components/**/*.{js,ts,jsx,tsx,mdx}", // components 目录下的文件
"*.{js,ts,jsx,tsx,mdx}", // 根目录下的文件
"app/**/*.{ts,tsx}", // 另一种写法（兼容 Next.js）
"components/**/*.{ts,tsx}",
],
(3) theme.extend
扩展 Tailwind 的默认主题，包括：
① 颜色 (colors)
-
使用 HSL 颜色模式（
hsl(var(--color))），方便动态调整（如暗黑模式）。 -
自定义了：
primary（主色，带 50-950 色阶）secondary（次色，带 50-950 色阶）destructive（错误色）muted（弱化色）accent（强调色）popover（浮层背景色）card（卡片背景色）
② 圆角 (borderRadius)
lg、md、sm分别对应不同的圆角大小，基于 CSS 变量--radius。
(4) plugins
-
加载了
tailwindcss-animate插件，用于添加动画相关的工具类（如animate-spin）。``` plugins: [require("tailwindcss-animate")],
2. postcss.config.js
const config = {
plugins: {
tailwindcss: {},
},
};
export default config;
三. 基本使用
1.在 CSS 中引入基础样式
创建 styles\globals.css（或任意 CSS 文件）：
@tailwind base; /* 引入基础样式（如 normalize.css） */
@tailwind components; /* 引入组件类（如 .btn、.card） */
@tailwind utilities; /* 引入所有实用类 */
2.在项目中引入该 CSS 文件
-
HTML 中直接引入：
<link href="/styles/tailwind.css" rel="stylesheet"> -
在 JS 框架中引入（如 Vue/React）：
import './styles/tailwind.css';
示例如下：
-
使用自定义颜色
```<!-- 使用 primary 颜色 --> <div class="bg-primary-500 text-primary-foreground"> 主色背景 + 前景文字 </div> <!-- 使用 secondary 颜色 --> <button class="bg-secondary-600 hover:bg-secondary-700"> 按钮 </button> -
在 HTML 或 JS 中切换暗黑模式：
```<html class="dark"> <!-- 启用暗黑模式 --> <body class="bg-background text-foreground"> <!-- 内容 --> </body> </html> -
或者在 JS 中动态切换：
```document.documentElement.classList.add("dark"); // 开启暗黑模式 document.documentElement.classList.remove("dark"); // 关闭暗黑模式 -
使用动画插件：
<div class="animate-spin">旋转动画</div> <div class="animate-pulse">脉冲动画</div>
3.利用Tailwind CSS 实现响应式设计
Tailwind 默认使用 5 个断点（与常见设备尺寸匹配），通过添加前缀来控制不同屏幕下的样式：
语法规则：
{断点前缀}:{实用类}
示例：md:text-lg 表示“在中屏及以上设备应用 text-lg”。
示例如下：
-
基础响应式文本
手机（<768px）：
text-sm（14px）平板（≥768px）：
text-base（16px）笔记本（≥1024px）：
text-lg（18px）
<p class="text-sm md:text-base lg:text-lg">
这段文字在小屏显示小号，中屏中号，大屏大号。
</p>
-
响应式布局（栅格/弹性盒）
手机：垂直排列（
flex-col）平板及以上：水平排列（
flex-row），宽度各占 50%（w-1/2）
<div class="flex flex-col md:flex-row">
<div class="w-full md:w-1/2">左侧内容</div>
<div class="w-full md:w-1/2">右侧内容</div>
</div>
-
响应式显示/隐藏
md:hidden：在中屏隐藏（display: none）
<div class="block md:hidden lg:block">
手机显示，平板隐藏，大屏再次显示。
</div>
-
响应式边距/间距
m-4（手机）：1remm-8（平板）：2remm-12（笔记本）：3rem
<div class="m-4 md:m-8 lg:m-12">
边距随屏幕增大而增加。
</div>
