在 vite 项目中接入 tailwind css 需安装依赖、配置 tailwind.config.js 的 content 路径、在 css 中引入 @tailwind 指令，并在 js 入口显式导入该 css 文件。

在 Vite 项目中接入 Tailwind CSS 很简单，核心是安装依赖、配置文件、启用 PostCSS 支持，并确保样式能被正确加载和按需提取。

安装 Tailwind CSS 及相关依赖

在项目根目录下运行以下命令：

• npm install -D tailwindcss postcss autoprefixer
• 然后初始化 Tailwind 配置文件：npx tailwindcss init -p（-p 参数会同时生成 postcss.config.js）

配置 tailwind.config.js

打开刚生成的 tailwind.config.js，修改 content 字段，指定所有可能用到 Tailwind 类名的文件路径，例如：

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

⚠️ 注意：Vite 默认不扫描 .vue 或 .tsx 文件中的 class 字符串，所以必须显式列出这些后缀，否则 HMR 下样式可能丢失或 PurgeCSS 误删。

在主样式文件中引入 Tailwind

在你的入口 CSS 文件（如 src/style.css 或 src/main.css）中，加入：

Vite

为开发、生产构建和库打包配置并优化 Vite。

下载

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

并在 main.js 或 main.ts 中导入该 CSS 文件：

import './style.css'

验证是否生效

在任意组件中写一个 Tailwind 类，比如：

<div class="text-blue-500 font-bold p-4">Hello Tailwind</div>

启动开发服务器（npm run dev），如果文字变蓝加粗且有内边距，说明已成功接入。

不复杂但容易忽略关键点：路径配置、PostCSS 自动启用、以及确保 CSS 被 JS 入口显式引入。

Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南