无框架纯HTML/CSS项目中Tailwind CSS编译问题求助

1. 修复构建脚本，开启自动监听 #

打开你的package.json，给编译脚本添加--watch参数，让Tailwind自动监听文件变化并重新编译：

"scripts": {
  "build": "tailwindcss -i ./src/input.css -o ./dist/output.css",
  "watch": "tailwindcss -i ./src/input.css -o ./dist/output.css --watch"
}

之后运行npm run watch替代npm run build，修改HTML中的Tailwind类名后，Tailwind会自动重新生成CSS，刷新页面即可看到变化。

2. 检查Tailwind配置的content路径 #

如果开启监听后样式仍不生效，大概率是tailwind.config.js的content配置未正确覆盖所有用到Tailwind类名的文件，导致Tailwind无法扫描到新修改的类。示例配置如下：

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./*.html", "./src/**/*.{html,js}"], // 匹配根目录及src下所有HTML/JS文件
  theme: {
    extend: {},
  },
  plugins: [],
}

确保路径覆盖所有包含Tailwind类的文件，这样Tailwind才能识别新类并编译到CSS中。

3. 排查并解决警告问题 #

运行脚本时的警告会明确提示原因，常见场景及解决方法：

• 提示No utility classes were detected...：直接按上面的方法修正content路径即可
• 版本兼容警告：升级Tailwind或相关依赖到匹配版本
• 插件相关警告：移除不兼容的插件或更新插件版本

4. 验证CSS文件引入路径 #

确认HTML中引入的是Tailwind编译后的输出CSS文件（比如./dist/output.css），路径错误会导致修改后的CSS无法加载到页面。

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