Sass @extend 未在Tailwind CSS @layer components作用域生效问题

问题描述 #

将SCSS编译为CSS后，使用@extend继承Sass占位符%button的.sample类，其继承的样式被排除在Tailwind的@layer components作用域之外；未使用@extend时功能正常。询问该写法是否已废弃，或有无其他实现方式？

开发环境 #

• 操作系统：Linux Ubuntu22.04 LTS
• 构建工具：Webpack
• 依赖版本：Sass 1.62.1、tailwindcss 3.3.2、postcss 8.4.24

源码示例 #

sample.scss #

@use 'tailwind.css' as *;

%button {
  background: red;
}

@layer components {
  .sample {
    @apply text-white;
    @extend %button;
  }

  .sample2 {
    background: blue;
  }
}

当前编译结果dist.css #

@tailwind base;
@tailwind components;
@tailwind utilities;
.sample {
  background: red;
}

@layer components {
  .sample {
    @apply text-white;
  }
  .sample2 {
    background: blue;
  }
}

postcss.config.cjs #

const tailwindcss = require('tailwindcss');

module.exports = {
  plugins: [
    tailwindcss('./tailwind.config.cjs')
  ]
};

tailwind.config.cjs #

module.exports = {
  content: ["./src/**/**/*.{html,ts,tsx,js,jsx}","./src/backend/static/*.{html,js,css}"],
  plugins: [],
  darkMode: 'class'
}

期望编译结果 #

希望.sample类的所有样式都处于@layer components作用域内，即dist.css如下：

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer components {
  .sample {
    @apply text-white;
    background: red;
  }
  .sample2 {
    background: blue;
  }
}

解决方案 #

这种写法并没有被废弃，问题出在Sass的@extend执行逻辑和Tailwind的@layer处理顺序上：Sass会先处理@extend，将占位符的样式提取到目标选择器所在的位置，而此时Tailwind的@layer还未被PostCSS处理，导致继承的样式被留在了layer外部。

有两种可行的解决方式：

方式一：将占位符放在@layer components内部 #

把Sass占位符定义到@layer components里面，这样@extend生成的样式会被Tailwind识别并保留在layer作用域内：

@use 'tailwind.css' as *;

@layer components {
  %button {
    background: red;
  }

  .sample {
    @apply text-white;
    @extend %button;
  }

  .sample2 {
    background: blue;
  }
}

方式二：改用Sass混合宏（@mixin）替代@extend #

混合宏会直接将样式注入到目标选择器中，不会有样式位置偏移的问题：

@use 'tailwind.css' as *;

@mixin button {
  background: red;
}

@layer components {
  .sample {
    @apply text-white;
    @include button;
  }

  .sample2 {
    background: blue;
  }
}

两种方式编译后都能得到你期望的结果，推荐根据实际场景选择：如果需要复用的样式是用于选择器继承合并，用方式一；如果只是单纯的样式代码复用，方式二更灵活。

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