2

我创建了一个使用 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文件中一样。

谢谢。

4

0 回答 0