Vite/Vue3构建时Tailwind的!p-0类为何自动转为p-0？

这个问题是Tailwind CSS JIT模式的默认行为导致，与PostCSS、Vite本身无关：

• Tailwind JIT引擎通过扫描content配置指定的文件来生成所需样式，默认扫描逻辑不会将带!前缀的优先级类（如!p-0）识别为需要生成样式的有效类名。
• 生产构建阶段，Tailwind内置的PurgeCSS会移除所有未被标记为“有用”的类对应的样式；同时Vue模板的生产优化流程会清理无对应CSS样式的类名，最终将!p-0简化为p-0。

为什么加入safelist能解决问题 #

在tailwind.config.js的safelist中添加['!p-0']，相当于强制告知Tailwind JIT引擎该类需要保留并生成对应样式，PurgeCSS不会将其标记为无用类，模板优化阶段也会保留完整的类名（包括!前缀）。

可选优化方案 #

除了使用safelist，还可以通过以下方式优化：

• 确认content配置覆盖了所有包含优先级类的文件（当前配置./src/**/*.{vue,js,ts,jsx,tsx}已覆盖常规场景，复杂动态类场景需额外处理）
• 避免通过字符串拼接生成带!的类名，需明确写出完整类名（确保JIT引擎能扫描到）

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