如何在纯JavaScript的Vite项目中使用TailwindCSS？

一、标准配置流程（从头走一遍避免遗漏） #

如果之前的操作有疏漏，按以下步骤重新配置：

1. 初始化Vite纯JS项目
   （已创建的话可跳过，建议从头来避免残留问题）

npm create vite@latest my-project -- --template vanilla
cd my-project
npm install

2. 安装Tailwind及依赖

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

-p参数会自动生成postcss.config.js，省去手动配置PostCSS的步骤

3. 配置Tailwind扫描路径
   打开tailwind.config.js，修改content数组，确保Tailwind能检测到所有用到它的文件：

/** @type {import('tailwindcss').Config} */
export default {
  content: [
    "./index.html",
    "./src/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

4. 在原生CSS中引入Tailwind指令
   打开src/style.css，替换原有内容为：

/* 自定义原生CSS可以写在这里，也可以单独建CSS文件后import进来 */
@tailwind base;
@tailwind components;
@tailwind utilities;

/* 示例自定义样式 */
.custom-box {
  border: 1px solid #eee;
  padding: 20px;
}

这样就能同时使用Tailwind工具类和原生CSS了

5. 启动项目

npm run dev

二、常见错误排查 #

如果执行npm run dev仍报错，按以下方向排查：

• Tailwind指令未识别：检查style.css里的@tailwind指令是否拼写正确，以及tailwind.config.js的content路径是否覆盖了所有用到Tailwind的文件
• PostCSS配置错误：确认postcss.config.js内容如下，确保自动引入了所需插件：

export default {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
}

• 版本冲突：卸载现有依赖后重新安装最新版：

npm uninstall tailwindcss postcss autoprefixer
npm install -D tailwindcss@latest postcss@latest autoprefixer@latest

• 缓存问题：删除node_modules、package-lock.json，重新执行npm install后启动项目

三、验证配置生效 #

在index.html中添加测试代码：

<h1 class="text-4xl font-bold text-green-600">Tailwind + Vite 测试</h1>
<div class="custom-box bg-gray-50">这是带原生样式的盒子</div>

启动项目后，若文字显示绿色加粗、盒子有自定义边框和Tailwind背景色，说明配置成功

内容的提问来源于stack exchange，提问作者Gurur Kısaoğlu