#TailwindCSS not working in React Components in a weird way.

6 messages · Page 1 of 1 (latest)

woeful perch
#

I've already specified .tsx files in my tailwind config file, but the tailwind classes only worked in .astro files unless I put the same class anywhere on my BaseLayout.astro, then it will work only for that specific class. But then if I delete the class in my layout, the class in the .tsx files still works.

tailwind.config.mts:

export default {
  content: ["./src/**/*.{astro, tsx}"],
};

index.astro:

---
import BaseLayout from "@layouts/BaseLayout.astro";
---

<BaseLayout>
  <p class="text-red-600">Landing</p>
</BaseLayout>

BaseLayout.astro:

---
import BaseHead from "@components/BaseHead";
import Navbar from "@components/Navbar";
---

<html>
  <BaseHead pageName="Landing" />
  <body className="text-blue-600">
    <Navbar />
    <slot />
  </body>
</html>

Navbar.tsx: (the text-blue-600 only works if I also put the same class on the layout anywhere.)

export default function Navbar() {
  return (
    <header>
      <h1 className="text-blue-600">BRAND</h1>
    </header>
  );
}
image.png
glad hill
#

I think you need to remove the space in your content glob

woeful perch
#

I'm sorry, what's a content blob?

glad hill
#

In your Tailwind config, the content attribute

#

You have a space after the comma, *.{.astro, tsx}

#

And I suspect that it could be looking for filename. tsx (notice the space)