标签：TailwindCSS

TailwindCSS v4 全新颜色系统与主题切换

TailwindCSS v4 对颜色系统进行了重大重构，核心解决了此前通过 CSS 变量自定义颜色时遇到的痛点。旧方法在变量中存储分离的 RGB 分量字符串，不仅导致编辑器无法识别颜色预览，更严重的问题是当颜色自身带有透明度时，`/` 语法会完全失效，因为无法二次应用透明度。 v4 的关键改进是引入了 `color-mix()` 函数来处理透明度调整。它允许将任意颜色（包括本身带透明度的）与 `transparent` 进行混合，通过控制混合比例来实现最终的透明效果，从而彻底解决了上述限制。 此外，v4 利用原生的 CSS `@layer` 机制，将颜色定义统一收拢在 `@layer theme` 中。这使得主题配置不再依赖 JavaScript，而是纯粹通过 CSS 实现，极大地提升了灵活性。通过覆写 `@layer theme` 内的变量，可以轻松实现 light/dark 模式切换以及基于 `data-theme` 等属性的自定义主题（如“可爱”风格）切换，并且每套主题都能良好适配暗色模式。整个系统在开发时即可直观预览颜色，体验远优于以往。