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 集成指南

1. 创建 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

2. 安装 Tailwind CSS 及其依赖：

npm install -D tailwindcss@3 postcss autoprefixer
npx tailwindcss init -p

3. 配置 tailwind.config.js ：

export default {
  content: ["./index.html", "./src/**/*.{vue,js,ts,jsx,tsx}"],
  theme: {
    extend: {},
  },
  plugins: [],
}

4. 在 src/assets/main.css 或 src/index.css 中添加 Tailwind 指令：

@tailwind base;
@tailwind components;
@tailwind utilities;

🛠️ Tailwind CSS V4 集成指南

1. 创建 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

2. 安装 Tailwind CSS 及其依赖：

npm install -D tailwindcss @tailwindcss/vite

3. 配置 vite.config.ts ：

import tailwindcss from '@tailwindcss/vite'
export default defineConfig({
  plugins: [
    tailwindcss(),
  ],
})

4. 在 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 轻松完成网站的响应式设计，敬请期待！