Директива Tailwindcss @layer не работает в проекте ReactJS/ViteJS

Question

Я создал приложение для реагирования на использование vitejs со следующей настройкой:

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

Эта установка работает следующим образом:

• index.html использует (т. е. <script src="/src/main.js" type="module"></script>)
• main.js импорт ОБЕИ И
• App.js импорт.

Теперь я хотел бы использовать директиву попутного ветра следующим образом:

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

Теперь это работает внутри:

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

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

Это добавит фиолетовый фон в слой компонентов попутного ветра CSS. Кроме того, если я хочу переопределить этот класс классом tailwind-css, я могу:

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

В этом случае фон будет зеленым, а не фиолетовым.

Однако это не работает в

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

В этом случае фон НЕ становится фиолетовым.

Мне интересно, как я могу получить @layer директива о работе в App.css файл (как и в index.css файл.

Спасибо.