Tailwindcss @layer directive does not work in ReactJS/ViteJS Project

Question

I have created a react app use vitejs with the following setup:

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

This setup works as follows:

• index.html uses main.js (i.e., <script src="/src/main.js" type="module"></script>)
• main.js imports BOTH index.css AND App.js
• App.js imports App.css.

Now, what I would like to do is use the tailwind @layer directive as follows:

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

Now, this works inside of index.css:

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

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

That will add a purple background in the components layer of tailwind css. Furthermore, if I want to override that class with a tailwind-css class I can:

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

In this instance the background will be green, not purple.

However, this does not work in App.css

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

In this case, the background does NOT turn purple.

I am wondering, how can I get the @layer directive to work in the App.css file (just like it does in the index.css file.

Thanks.