important 必须为布尔值 true 才全局生效，字符串或数字无效；preflight 重置规则带 !important 会覆盖工具类；修改配置需重启开发服务器；class 字符串拼写错误也会导致样式失效。
important: true 写成字符串就失效
配置项 important 是布尔类型，必须写成 important: true。写成 important: "true"、important: "#app"（除非你明确想局部锁定）、甚至 important: 1 都不会生效——Tailwind 构建时直接忽略该配置，相当于没开。
常见错误是复制网上示例时漏掉引号或类型不匹配，比如：
-
important: "true"→ 不生效，字符串值被丢弃 -
important: '#app'→ 生效，但只作用于#app容器内，不是全局 -
important: true→ 全局生效，所有工具类带!important
开了 important 却还是被第三方样式覆盖
根本原因：你面对的不是类名冲突，而是 Tailwind 的 @layer base（即 preflight）直接重置了 button、h1、input 等原生标签样式。这些规则不依赖类名，所以 important: true 虽然让 bg-blue-500 变成 background-color: #3b82f6 !important，但它压不过 button { background-color: transparent !important } 这种也带 !important 的 preflight 规则。
验证方法：打开 DevTools → Elements → 选中一个异常按钮 → Styles 面板里找带 data-tailwind="true" 的 button 规则，如果看到 background-color: transparent 来自 @layer base，那就不是 important 能解决的。
tailwind.config.js 修改后没重建 CSS
Vite 或 Webpack 不会自动监听配置文件变更并刷新已生成的 CSS。改完 important: true 后，必须手动重启开发服务器（npm run dev），否则旧 CSS 缓存还在用，看起来像“配置无效”。
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
另外注意：content 字段路径若没覆盖到实际使用类名的文件（比如漏了 .tsx 或 .vue），Tailwind 根本不会生成对应工具类，此时开 important 也没意义——连基础类都没编译出来。
动态添加类时拼错了 class 字符串
JavaScript 动态设置 element.className = 'text-red-500 bg-blue-400' 没问题，但写成 element.className = 'text-red-500-bg-blue-400'（用短横线连起来）就完全失效——浏览器把它当做一个类名，而 Tailwind 没生成这个类。
Vue/React 中用 class 绑定也要注意语法：
- ✅
:class="['text-red-500', 'bg-blue-400']" - ✅
class="text-red-500 bg-blue-400" - ❌
class="text-red-500-bg-blue-400"
这种错误和 important 无关，但现象一样：样式不出现，容易误判为配置失效。
真正卡住的地方往往不在配置本身，而在 preflight 的底层重置逻辑、构建缓存残留、或 class 字符串解析偏差——这些细节不显眼，但一错就全盘失效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
