DEV Community
·
为什么 Tailwind CSS 有时让你感到困惑
💡
原文英文，约600词，阅读约需2分钟。
📝
内容提要
Tailwind CSS 的实用优先方法灵活，但可能意外清除未使用的样式，导致布局问题。为避免此情况，可以在 tailwind.config.js 中添加 safelist 选项，以确保特定样式不被清除。这是一个适合急需完成工作的开发者的快速解决方案。
🎯
关键要点
-
Tailwind CSS 的实用优先方法灵活，但可能意外清除未使用的样式，导致布局问题。
-
Tailwind CSS 只包含实际使用的工具类，保持最终 CSS 文件小而干净。
-
在开发过程中，Tailwind 可能会清除动态使用或仅在特定屏幕尺寸下出现的类。
-
可以在 tailwind.config.js 中添加 safelist 选项，以确保特定样式不被清除。
-
通过将样式添加到 safelist，可以防止 Tailwind 在最终构建中清除这些类。
-
safelist 方法是一个快速解决方案，适合急需完成工作的开发者。
❓
延伸问答
Tailwind CSS 的实用优先方法有什么优缺点？
Tailwind CSS 的实用优先方法灵活且能保持最终 CSS 文件小而干净，但可能意外清除未使用的样式，导致布局问题。
为什么 Tailwind CSS 会清除未使用的样式？
Tailwind CSS 在构建过程中会扫描代码，只包含实际使用的工具类，并在生产环境中清除未使用的类。
如何防止 Tailwind CSS 清除特定样式？
可以在 tailwind.config.js 中添加 safelist 选项，将特定样式添加到 safelist 中，以防止它们被清除。
safelist 方法适合什么样的开发者？
safelist 方法适合急需完成工作的开发者，因为它提供了一个快速解决方案，避免了复杂的配置过程。
在使用 Tailwind CSS 时，如何处理动态使用的类？
动态使用的类可能会在开发过程中被清除，建议将这些类添加到 safelist 中，以确保它们在最终构建中保留。
Tailwind CSS 的清除机制会影响开发过程吗？
是的，Tailwind CSS 的清除机制可能在开发过程中意外清除重要样式，导致布局问题。
➡️
