Astro + React + Tailwind v4: “Unknown at rule @reference” & “Unknown at rule @apply” | Astro Lounge | Page 1

Hello everyone,

I’m starting a new Astro project with React and Tailwind v4, but my CSS Modules aren’t picking up Tailwind’s @apply or my @reference. Here’s exactly what I’ve done:

Scaffold Astro

npm create astro@latest app
# Chose “Install recommended” → Yes  
# Chose “Install dependencies” → Yes  
# Chose “Create git repo” → No

Add React

npx astro add react
# Accepted all prompts

Add Tailwind

npx astro add tailwind
# Accepted all prompts

Global CSS (src/styles/global.css):

@import "tailwindcss";

Import global CSS in src/pages/index.astro:

---
import "../styles/global.css";
import Counter from "../components/Counter.jsx";
---
<html>
  <body>
    <Counter client:load />
  </body>
</html>

CSS Module (src/components/Counter.module.css):

@reference "../styles/global.css";

.counter {
  @apply flex items-center justify-center h-screen bg-gray-100;
}

Errors:

@reference Unknown at rule @reference
@apply     Unknown at rule @apply

Question:
Why aren’t my CSS Modules recognizing @reference and @apply? What configuration step am I missing?

Thanks in advance!

#Astro + React + Tailwind v4: “Unknown at rule @reference” & “Unknown at rule @apply”