Can not use tailwindcss's @layer in vite enviroment

Question

When creating a table, I want to use border-spacing: 0 15px;. But I found that there is no corresponding utility in TailWindCSS. So I want to create a utility, my approach is like this:

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

Then terminal reported me an error:

[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)

But the strange thing is I just create a project a few days ago. It used the same approach and it also use TailWindCSS in vite. And it succeeded.

Answer 1

You should remove colon : after .border-spacing-0 Then Your error will disappear ;-) Here You can read more about it.

---

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