CSS Layer、Tailwind 和 sass 如何共存？

分层理论

Tailwind 提供了一个 Layer 的概念，通过对样式代码进行分层管理，能够有效减少样式冲突的发生。这些样式主要被划分为以下三层：

base：基础层，样式重置
components：组件层，组件和模块的样式。
utilities：工具类层，原子样式（各种实用工具类比如边距、颜色等）

这是一段经典的 tailwind 分层代码：

css 复制代码

@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 支持在导入时指定层级，所以写法很简单。

css 复制代码

@import "tailwindcss/base" layer(my-base);
@import "tailwindcss/components" layer(my-components);
@import "tailwindcss/utilities" layer(my-utilities);

结合 Sass

但实际能不能这么写取决于你项目中的 postcss 以及相关 CSS 处理器的版本和配置。如果你使用的是 Sass，那至少目前为止得使用另一种写法：

scss 复制代码

@layer app-base {
  @import "tailwindcss/base";
}
@layer app-cmpts {
  @import "tailwindcss/components";
}
@layer app-utils {
  @import "tailwindcss/utilities";
}

使用上述方法可行，但是会在控制台抛警告。

bash 复制代码

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之类规则的写法。

scss 复制代码

// ❌ 错误的
@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。

最终代码参考：

scss 复制代码

@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");
}

成功跑起来啦，此处应有点赞。

CSS Layer、Tailwind 和 sass 如何共存？

分层理论

结合原生 CSS

结合 Sass

更多