Vite+JavaScript项目中Tailwind CSS不生效问题排查

我用Vite构建JavaScript应用，想通过Tailwind CSS快速开发样式，但每次配置都出问题。这次配置完后Tailwind CSS完全不生效，怀疑是修改了Vite项目根目录导致的。

相关文件代码 #

首页HTML代码 #

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <link href="/src/style/output.css" rel="stylesheet">
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Hermes</title>
</head>
<body> 
    <h1>My homepage</h1> 
    <a href="test.html">Test</a> 
    <div id="app" class="h-14 bg-gradient-to-r from-purple-500 to-pink-500">h</div> 
    <script type="module" src="../main.ts"></script>
</body>
</html>

Tailwind配置文件 #

/** @type {import('tailwindcss').Config} */
module.exports = { 
    content: ["./src/views/*.html"],
    theme: {
        extend: {},
    }, 
    plugins: [],
}

Tailwind输入文件（main.css） #

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

问题现象：HTML中引入的output.css仅包含Tailwind的基础样式重置，自定义的Tailwind工具类样式完全未生成。

文件夹结构 #

结合你的配置和目录结构，问题核心在于路径匹配错误和Vite资源引用方式不当，按以下步骤修复：

1. 调整Tailwind的Content扫描路径
   若你的tailwind.config.js放在项目根目录（与src文件夹同级），当前content路径./src/views/*.html是正确的，但如果修改了Vite根目录为src，则需将路径改为./views/*.html。另外，建议改用./src/views/**/*.html来匹配所有子目录下的HTML文件，避免遗漏其他页面。

2. 修正Vite中CSS的引用方式
   不要手动引入output.css，直接在main.ts中导入Tailwind的输入文件main.css，让Vite自动处理打包：

   import './style/main.css'
   

   之后删除HTML中对output.css的<link>引用，Vite会自动将CSS打包并注入页面。

3. 确认Vite根目录配置
   若你在vite.config.js中设置了root: './src'，除了调整Tailwind的content路径，还要确保main.ts中CSS的导入路径与新根目录匹配。

4. 重启Vite开发服务器
   修改Tailwind的content配置后，必须重启开发服务器，否则Tailwind不会重新扫描文件生成新的样式类。

完成以上步骤后，检查页面中的div#app是否显示渐变背景和指定高度，即可验证配置是否生效。

内容的提问来源于stack exchange，提问作者Stef Verniers