reactjs - Tailwindcss @layer 指令在 ReactJS/ViteJS 项目中不起作用

Question

我创建了一个使用 vitejs 的反应应用程序，设置如下：

- index.html
- index.css
- main.js
- App.css
- App.js

此设置的工作原理如下：

• index.html使用main.js（即，<script src="/src/main.js" type="module"></script>）
• main.js进口 BOTH index.cssANDApp.js
• App.js进口App.css。

现在，我想做的是使用 tailwind@layer指令，如下所示：

@layer components {
  .some-class-name {
   @apply [tailwind classes]
 } 
}

现在，这适用于index.css：

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer components {
  .header {
    @apply bg-purple-500;
  }
}

这将在tailwind css的组件层中添加一个紫色背景。此外，如果我想用 tailwind-css 类覆盖该类，我可以：

<div className="header bg-green-600">Header</div>

在这种情况下，背景将是绿色，而不是紫色。

但是，这在App.css

@layer components {
  .header {
    @apply bg-purple-500;
  }
}

在这种情况下，背景不会变成紫色。

我想知道，我怎样才能让@layer指令在App.css文件中工作（就像它在index.css文件中一样。

谢谢。

标签： reactjstailwind-cssvitetailwind-in-js