使用PostCSS-Each在Tailwind层定义间距工具类遇错求助

问题描述 #

我想要创建一套基于CSS clamp的间距控制工具类，用于不同场景：比如元素A需要顶部内边距96px，元素B需要上下内边距96px，元素C需要底部内边距96px。我尝试用PostCSS-Each实现循环生成，但使用@apply u-sot-96;时出现错误：

The u-sot-96 class does not exist. If u-sot-96 is a custom class, make sure it is defined within a @layer directive.

我的实现代码如下：

:root {
  --s-24: clamp(15px, 1.7vw, 24px);
  --s-32: clamp(24px, 2.22vw, 32px);
  --s-44: clamp(12px, 22vw, 44px);
  --s-52: clamp(30px, 3.61vw, 52px);
  --s-56: clamp(30px, 2.9vw, 56px);
  --s-74: clamp(50px, 3.85vw, 74px);
  --s-96: clamp(35px, 6.7vw, 96px);
  --s-101: clamp(60px, 7.06vw, 101.72px);
  --s-106: clamp(50px, 7.36vw, 106px);
  --s-115: clamp(35px, 6vw, 115px);
}
@layer utilities {
  @each $s in (24, 32, 44, 52, 56, 74, 96, 101, 106, 115) {
    .u-soy-$(s) {
      margin-top: var(--s-$(s));
      margin-bottom: var(--s-$(s));
    }

    .u-sot-$(s) {
      margin-top: var(--s-$(s));
    }

    .u-sob-$(s) {
      margin-bottom: var(--s-$(s));
    }

    .u-siy-$(s) {
      padding-top: var(--s-$(s));
      padding-bottom: var(--s-$(s));
    }

    .u-sit-$(s) {
      padding-top: var(--s-$(s));
    }

    .u-sib-$(s) {
      padding-bottom: var(--s-$(s));
    }
  }
}

请问这种需求能否通过循环实现，还是必须逐个定义工具类？

解决方案 #

循环完全可行，不需要逐个定义工具类，报错的核心原因是PostCSS变量插值语法错误，导致工具类未被正确生成。

1. 修正插值语法 #

PostCSS中拼接变量到类名或属性值时，必须用#{}包裹变量，而非$()。修正后的代码如下：

:root {
  --s-24: clamp(15px, 1.7vw, 24px);
  --s-32: clamp(24px, 2.22vw, 32px);
  --s-44: clamp(12px, 22vw, 44px);
  --s-52: clamp(30px, 3.61vw, 52px);
  --s-56: clamp(30px, 2.9vw, 56px);
  --s-74: clamp(50px, 3.85vw, 74px);
  --s-96: clamp(35px, 6.7vw, 96px);
  --s-101: clamp(60px, 7.06vw, 101.72px);
  --s-106: clamp(50px, 7.36vw, 106px);
  --s-115: clamp(35px, 6vw, 115px);
}
@layer utilities {
  @each $s in (24, 32, 44, 52, 56, 74, 96, 101, 106, 115) {
    .u-soy-#{$s} {
      margin-top: var(--s-#{$s});
      margin-bottom: var(--s-#{$s});
    }

    .u-sot-#{$s} {
      margin-top: var(--s-#{$s});
    }

    .u-sob-#{$s} {
      margin-bottom: var(--s-#{$s});
    }

    .u-siy-#{$s} {
      padding-top: var(--s-#{$s});
      padding-bottom: var(--s-#{$s});
    }

    .u-sit-#{$s} {
      padding-top: var(--s-#{$s});
    }

    .u-sib-#{$s} {
      padding-bottom: var(--s-#{$s});
    }
  }
}

2. 额外检查项 #

• 文件导入顺序：确保定义工具类的CSS文件，在使用@apply的文件之前被导入，避免工具类未生成就被引用。
• PostCSS插件配置：确认postcss-each插件已正确安装并加入PostCSS配置列表，保证循环语法能被编译。
• @layer作用域：你的代码已将工具类放在@layer utilities中，这是正确的，Tailwind等工具会优先识别该层的类，无需调整。

修正后，u-sot-96等工具类会被正确生成，@apply即可正常引用。

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