Vite环境使用TailwindCSS的@layer定义自定义工具类报错如何解决？

报错原因 #

你的自定义工具类语法存在错误：类名.border-spacing-0结尾多写了一个多余的英文冒号，PostCSS 解析器会将这个冒号识别为伪类/伪元素的起始标记，因此直接抛出「期望获得伪类或伪元素」的报错。

你之前的项目可以正常运行，大概率是以下几种情况之一：

• 旧项目写自定义类时没有多加这个冒号，你记错了两次的写法
• 旧项目的PostCSS依赖版本更低，对这类语法错误的容错度更高，没有抛出阻断性报错
• 旧项目安装了自动修正CSS语法的第三方插件，编译时自动去掉了多余的冒号

解决方法 #

删掉类名后的多余冒号即可，也建议你调整类名与实际属性值匹配，避免和TailWindCSS后续可能推出的原生工具类重名冲突：

@layer utilities{
  /* 类名匹配属性值0 15，语义更清晰 */
  .border-spacing-0-15 {
    border-spacing: 0 15px;
  }
}

修改完成后重启Vite开发服务，即可正常使用该自定义工具类。

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