🥞 在 tailwind 中使用现代化 CSS Layers
分层理论
Tailwind 提供了一个 Layer 的概念，通过对样式代码进行分层管理，能够有效减少样式冲突的发生。这些样式主要被划分为以下三层：
- base：基础层，样式重置
- components：组件层，组件和模块的样式。
- utilities：工具类层，原子样式（各种实用工具类比如边距、颜色等）
这是一段经典的 tailwind 分层代码：
@tailwind base;
@tailwind components;
@tailwind utilities;
@layer components {
.card {
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
}
@layer utils {
.glow {
box-shadow: 0 0 10px rgba(0, 0, 255, 0.5);
}
}
每层的优先级逐层递增。例如，当组件应用了 .card 样式后，可以通过 .glow 在业务代码中轻松覆盖，并且这一过程没有多少思维负担。
这种层级管理的方式在实际项目中相当有用，以前也有过类似的分层理论，比如 ITCSS，但是没有现代前端开发如此完备的基建的基础，使用起来相对复杂，所以难以深入人心。如今只要在项目引用 tailwind，就能方便实践一系列好用的理论，这也可能是 tailwind 能够迅速流行的原因之一。
不少前端应该知道 CSS 也有一个 Layer 的概念。其正式名称是 CSS Cascade Layers。相关的一系列新功能，支持率已经很好了，可以放心使用。
结合原生 CSS
在项目中引用 tailwind 容易引起传染。当子项目使用 tailwind Layer 后，为了主项目也能享受相应的写法加成，主项目也有必要安装并配置 tailwind。对于较大的项目，尤其是有历史积累的代码库，这种“传染性”可能会对架构的统一性与维护性造成负面影响。为了在更大范围的层度保证架构的统一和整洁性，我倾向使用原生 CSS 方法，作为 tailwind 的替代，但不能反过来。反过来 tailwind 只能作为原生 CSS 的补充。
怎么把 tailwind layer 和 CSS Layer 结合起来呢？
CSS Layer 支持在导入时指定层级，所以写法很简单。
@import "tailwindcss/base" layer(my-base);
@import "tailwindcss/components" layer(my-components);
@import "tailwindcss/utilities" layer(my-utilities);
结合 Sass
但实际能不能这么写取决于你项目中的 postcss 以及相关 CSS 处理器的版本和配置。如果你使用的是 Sass，那至少目前为止得使用另一种写法：
@layer app-base {
@import "tailwindcss/base";
}
@layer app-cmpts {
@import "tailwindcss/components";
}
@layer app-utils {
@import "tailwindcss/utilities";
}
使用上述方法可行，但是会在控制台抛警告。
Deprecation Warning: Sass @import rules are deprecated and will be removed in Dart Sass 3.0.
More info and automated migrator: https://sass-lang.com/d/import
新版 Dart Sass 将要废 @import语法，详见文档 @import is Deprecated。这个问题大家也应该处理过，直接替换 @use即可。那么惊喜来了，目前为止还是不支持这种 @layer中使 @use @forward之类规则的写法。
// ❌ 错误的
@layer app-base {
@use "tailwindcss/base" as *;
}
@layer app-cmpts {
@use "tailwindcss/components" as *;
}
@layer app-utils {
@use "tailwindcss/utilities" as *;
}
因为 Sass 使用的是静态解析，所以在@use需要放到文档头部，而在@layer中使用会打破这个规则。那么有没有解决办法呢？有的，使用内置 API 直接引用 CSS 文件，就能绕过使用@import限制。简单来说就是使用meta.load-cssAPI。
最终代码参考：
@use "sass:meta";
@layer base, app-base, components, app-cmpts, cx, utilities, app-utils;
@layer app-base {
@include meta.load-css("tailwindcss/base");
}
@layer app-cmpts {
@include meta.load-css("tailwindcss/components");
}
@layer app-utils {
@include meta.load-css("tailwindcss/utilities");
}
成功跑起来啦，此处应有点赞。