Tailwind CSS 初学者入门指南：项目集成，主要变更内容！
| 网站名称 | 类型 | 网址 |
|---|---|---|
| Tailwind CSS 官方文档 | 官方文档 | https://tailwindcss.com/docs |
| Tailwind Play | 在线编辑器 | https://play.tailwindcss.com/ |
| Tailwind Awesome | 资源集合 | https://www.tailwindawesome.com/ |
| Tailwind CSS 中文文档 | 中文文档 | https://www.tailwindcss.cn/ |
| komavideo/LearnTailwindCSS | Github教程 | https://github.com/komavideo/LearnTailwindCSS |
✨ 简介：什么是 Tailwind CSS？
Tailwind CSS 是一个实用优先的 CSS 框架，提供大量原子类（utility classes），使开发者能够快速构建响应式和现代化的用户界面。
优点包括：
-
🚀 快速开发
-
🔧 高度可定制
-
🧱 原子化设计
-
😍 社区资源丰富（例如组件库、插件等）
🛠️ Tailwind CSS V3 集成指南
- 创建 Vue / React 项目（使用 Vite）：
npm create vite@latest my-vue-app -- --template vue
或
npm create vite@latest my-vue-app -- --template react
cd my-vue-app
npm install
- 安装
Tailwind CSS及其依赖：
npm install -D tailwindcss@3 postcss autoprefixer
npx tailwindcss init -p
- 配置
tailwind.config.js：
export default {content: ["./index.html", "./src/**/*.{vue,js,ts,jsx,tsx}"],theme: {extend: {},},plugins: [],
}- 在
src/assets/main.css或src/index.css中添加 Tailwind 指令：
@tailwind base;
@tailwind components;
@tailwind utilities;
🛠️ Tailwind CSS V4 集成指南
- 创建 Vue / React 项目（使用 Vite）：
npm create vite@latest my-vue-app -- --template vue
或
npm create vite@latest my-vue-app -- --template react
cd my-vue-app
npm install
- 安装
Tailwind CSS及其依赖：
npm install -D tailwindcss @tailwindcss/vite
- 配置
vite.config.ts：
import tailwindcss from '@tailwindcss/vite'
export default defineConfig({plugins: [tailwindcss(),],
})
- 在
src/assets/main.css或src/index.css中添加 Tailwind 指令：
@import "tailwindcss";
🧠 V3 与 V4 的不同
🚫v4 不再使用 tailwind.config.js
在 Tailwind CSS v3中，我们通过 tailwind.config.js 文件来进行配置，包括内容路径、插件、主题扩展、前缀设置等。
但到了 v4，这些设置被“拆分”并迁移至 index.css 中 。
📦 内容（content）配置：自动化完成
在旧版本中，你需要手动指定项目中哪些文件会用到 Tailwind 类名，例如：
content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}']
而在 v4 中，这一步骤完全自动化 ✅。Tailwind 会自动扫描并分析项目文件，无需再配置 content 字段。
🔌 插件配置的新方式
在 v3 中，你可以这样注册插件：
// tailwind.config.js
plugins: [require('@tailwindcss/forms')]
v4 中则直接在 CSS 文件顶部导入插件，示例如下：
@import "tailiwindcss";
@plugin "daisyui";
注意：插件名需根据官方文档或第三方库说明书来书写。
🧩 前缀配置方式变化
v3 中我们可以在 tailwind.config.js 文件中添加前缀：
prefix: 'tw-'
v4 则需要在 CSS 文件顶部配置前缀，同时要求使用冒号分隔：
@import "tailiwindcss" prefix(D);
⚠️ 注意：新版本前缀必须使用 冒号 分隔，例如：D:text-red-500，而非 D-text-red-500。
<div className="D:text-sm"> </div>
🎨 主题定制与 theme 指令
在 v3 中使用 extend 来扩展默认主题，例如：
extend: {colors: {twitter: '#1DA1F2',orange: {500: '#FF5722',},}
}
v4 中这一切被迁移到 CSS 文件内的 @theme 指令中：
@theme {D-color-twitter: #1DA1F2;D-color-orange-500: #FF5722;space: initial; /* 相当于 v3 的 screens */
}
- 可以通过变量名是否存在来判断是“新增”还是“覆盖”主题配置。
🧠 @theme 是 v4 中主题定制的核心，取代了原来的 theme.extend。
🔄 配置项名称的变化
Tailwind v4 对部分配置项名称进行了统一和现代化改进，例如：
| v3 名称 | v4 名称 | 说明 |
|---|---|---|
| screens | --breakpoint-* | 控制响应式断点（默认变量） |
| colors | --color-* | 所有颜色变量采用前缀命名 |
📌 小结：迁移指南 ✅
| 配置项 | v3 方式 | v4 方式 |
|---|---|---|
| 配置文件 | tailwind.config.js | 自动完成，无需tailwind.config.js |
| 插件 plugins | 在 config 中注册插件 | 在 CSS 文件中使用 @plugin 导入 |
| 前缀 prefix | 在 config 中写 prefix: 'tw-' | 在 CSS 顶部用 @prefix 设置 |
| 主题扩展 theme | 使用 extend 合并设置 | 使用 @theme 并按变量名设置 |
Tailwind CSS v4 大幅简化了配置方式，早学早超神 🧙♂️✨！
如果你觉得这篇文章对你有帮助，不妨点个赞 ❤️、转发 🌐 或留言互动 💬！下一篇将带你解锁 如何利用Tailiwindcss 轻松完成网站的响应式设计，敬请期待！