Tailwind CSS任意值失效求助：自定义样式无法生效

可能的原因及修复方案 #

1. 修正content配置路径 #

你的tailwind.config.js里content指向了./venv/templates/**/*.{html,js}，但venv是Python虚拟环境目录，通常不会用来存放项目模板文件，路径大概率写错了。

改成实际的模板文件路径，比如：

content: ["./templates/**/*.{html,js}"],

如果模板文件在项目根目录的src文件夹下，就改成：

content: ["./src/**/*.{html,js}"],

Tailwind需要扫描到HTML/JS文件里的类名，才能生成对应的CSS样式，路径错误会导致所有自定义类和任意值都无法被识别。

2. 确认主CSS文件的Tailwind指令 #

确保项目的主CSS文件（比如styles.css）里包含以下代码：

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

这是Tailwind生成完整样式的基础，缺少的话自定义扩展和任意值都不会生效。

3. 修改配置后重启开发服务器 #

改完tailwind.config.js后，必须重启你的开发服务器（比如npm run dev或者对应的Python服务器），新配置才会被加载生效。

4. 检查构建工具配置 #

如果用了Vite、Webpack这类构建工具，要确认Tailwind插件已经正确配置，比如Vite需要确保vite.config.js里的Tailwind插件正常工作。

验证修复 #

完成上述操作后重新运行项目，检查：

• w-[100px]是否让元素宽度变为100px
• hover:bg-custom-blue是否在鼠标悬停时切换为自定义蓝色

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