tailwind css inside index.css doesn't appear in a lazy loaded component in react

[Wulgaren]

here's my project

i have my index.css file loading in main.tsx, inside index.css i have the basic

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

and then i have a few styles for the general html elements

@layer components {
  button {
    @apply mx-2 w-auto scale-100 rounded-lg border-2 border-transparent bg-primary p-2 text-white shadow-sm transition-all hover:bg-secondary;
  }

  input {
    @apply rounded-lg bg-white p-2 text-black shadow-sm dark:bg-gray-700 dark:text-white;
  }

etc.

but when i set lazy loading inside my app.tsx as such:

const Navbar = lazy(() => import("./components/navbar/Navbar"));

function App() {


  return (
    <>
      <Navbar />

suddenly those css aren't applied (for example button doesnt have the padding.

what can i do?

[wongjn]

The problem is the way you have your CSS structured. The per-component CSS you have each with their own Tailwind directives means that the Tailwind-compiled CSS gets generated per each CSS file you have:

Untitled.video.mp4

This then causes rules to override each other and will cause your undesired behavior:

First, I'd try to see if you can stick to Tailwind classes in the markup instead of any custom CSS.

For any CSS that doesn't necessarily need Tailwind features, consider removing any Tailwind CSS-language syntax from them. This would allow you to still have separate CSS files without needing to have the @tailwind directives in all of them. This would then mean less confliction of styles overriding each other

If you would still want custom CSS, consider having it in the index.css file only.

If you would still want separate custom CSS files, consider @importing them in the index.css file, instead of importing them in their relevant components.

[Wulgaren]

oh it works! thank you so much!

i think i'll try to convert those crazy transform css into arbitrary syntax so at least its not in css files... do you reckon thats the best solution?

[wongjn]

I don't know! If they're only used once then perhaps. Otherwise, you could consider having them in the index.css.