Tailwind CSS 安装与接入

两种接入方式

Tailwind v4 推荐用构建插件接入，不再需要 tailwind.config.js。根据你的构建工具选一种：

• 用 Vite 的项目，用 @tailwindcss/vite 插件。
• 用其它构建（Webpack、Parcel 等）的项目，用 @tailwindcss/postcss。

两种方式最后都要在你的 CSS 入口文件里写一句：

@import "tailwindcss";

Vite 项目接入

安装依赖

npm i tailwindcss @tailwindcss/vite

配置 vite.config

在 Vite 配置里加上 tailwind 插件：

import { defineConfig } from 'vite'
import tailwindcss from '@tailwindcss/vite'

export default defineConfig({
  plugins: [tailwindcss()],
})

引入 Tailwind

在你的 CSS 入口（比如 style.css）里加一行：

@import "tailwindcss";

然后在 HTML 里用 <link> 或构建入口把这个 CSS 引进来即可。

通用 PostCSS 接入

安装依赖

npm i tailwindcss @tailwindcss/postcss

配置 PostCSS

新建或编辑 postcss.config.mjs：

export default {
  plugins: {
    "@tailwindcss/postcss": {},
  },
}

引入 Tailwind

同样在 CSS 入口写：

@import "tailwindcss";

指定扫描目录

v4 默认自动扫描项目里用到的类，不需要写 content 数组。如果你的模板文件不在默认目录，可以用 @source 指令手动指定：

@import "tailwindcss";

@source "../views";
@source "./src/components";

@source 告诉 Tailwind「这些目录里的文件也要扫描」，放在 @import 之后即可。

验证是否生效

写一个简单的元素，加上几个工具类：

<h1 class="text-3xl font-bold text-blue-600 p-4">Hello Tailwind</h1>

启动本地服务后，如果标题变成大号、加粗、蓝色、带内边距，说明接入成功。如果没效果，先检查：

• 构建有没有报错
• CSS 入口确实被 HTML 引入了
• 浏览器缓存是否清理