不能在vite环境中使用尾风层

Question

在创建表时，我希望使用border-spacing: 0 15px;。但是我发现在TailWindCSS中没有相应的实用程序。所以我想创建一个实用程序，我的方法是这样的：

@layer utilities{
  .border-spacing-0: {
    border-spacing: 0 15px;
  }
}

终端向我报告了一个错误：

[vite] Internal server error: Expected a pseudo-class or pseudo-element.
  Plugin: vite:css
  File: F:/LearnCode/Front-end/Project/xust-admin/xust_kcsoft_admin/src/index.css
      at Root._error (F:\LearnCode\Front-end\Project\xust-admin\xust_kcsoft_admin\node_modules\postcss-selector-parser\dist\parser.js:174:16)
      at Root.error (F:\LearnCode\Front-end\Project\xust-admin\xust_kcsoft_admin\node_modules\postcss-selector-parser\dist\selectors\root.js:43:19)
      at Parser.error (F:\LearnCode\Front-end\Project\xust-admin\xust_kcsoft_admin\node_modules\postcss-selector-parser\dist\parser.js:740:21)
      at Parser.expected (F:\LearnCode\Front-end\Project\xust-admin\xust_kcsoft_admin\node_modules\postcss-selector-parser\dist\parser.js:1129:19)
      at Parser.pseudo (F:\LearnCode\Front-end\Project\xust-admin\xust_kcsoft_admin\node_modules\postcss-selector-parser\dist\parser.js:875:19)
      at Parser.parse (F:\LearnCode\Front-end\Project\xust-admin\xust_kcsoft_admin\node_modules\postcss-selector-parser\dist\parser.js:1080:14)
      at Parser.loop (F:\LearnCode\Front-end\Project\xust-admin\xust_kcsoft_admin\node_modules\postcss-selector-parser\dist\parser.js:1039:12)
      at new Parser (F:\LearnCode\Front-end\Project\xust-admin\xust_kcsoft_admin\node_modules\postcss-selector-parser\dist\parser.js:164:10)
      at Processor._root (F:\LearnCode\Front-end\Project\xust-admin\xust_kcsoft_admin\node_modules\postcss-selector-parser\dist\processor.js:53:18)
      at Processor._runSync (F:\LearnCode\Front-end\Project\xust-admin\xust_kcsoft_admin\node_modules\postcss-selector-parser\dist\processor.js:100:21)

但奇怪的是，几天前我刚刚创建了一个项目。它使用了相同的方法，在vite中也使用了TailWindCSS。它成功了。

Answer 1

您应该在:之后删除冒号.border-spacing-0，然后您的错误就会消失;-)在这里您可以读到关于它的更多。

@layer utilities {
  .border-spacing-0 {
    border-spacing: 0 15px;
  }
}