无法在 vite 环境中使用 tailwind css @layer

Question

创建 table 时，我想使用 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 之后删除冒号 : 然后你的错误就会消失;-)在这里你可以阅读more关于它的内容。

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

无法在 vite 环境中使用 tailwind css @layer

Can not use tailwindcss's @layer in vite enviroment

tailwind-css

vite