[v4] It seems that Oxide can't work with CSS Modules

[mogeko]

What version of Tailwind CSS are you using?

v4.0.0-alpha.19

What build tool (or framework if it abstracts the build tool) are you using?

vite: v5.4.1, @tailwindcss/vite: 4.0.0-alpha.19

What version of Node.js are you using?

v22.6.0

What browser are you using?

Firefox

What operating system are you using?

macOS

Reproduction URL

https://stackblitz.com/edit/vitejs-vite-pzkrfk?file=src%2Fmain.ts

But it seems that the node version of stackblitz does not support TailwindCSS 4.0.

Describe your issue

I tried to use prose.module.css:

@import '@fontsource-variable/fira-code' layer(base);

@theme {
  --font-family-mono: 'Fira Code Variable', ui-monospace, SFMono-Regular, Menlo,
    Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
}

.prose h1 {
  @apply text-4xl font-[900] lg:text-5xl font-mono;
}

But it looks like @apply... It has not been compiled. globals.css is worked.

[philipp-spiess]

@mogeko This doesn't work because you're not referencing any @tailwind APIs in the CSS module file. For the tailwind compiler this means that there are no indications that you want tailwind to work in this file and we don't pull in any utilities or default themes.

The reason for this is that a project can have multiple entrypoint CSS files and by only looking at a single CSS file we would otherwise not be able to find the right config.

How does your main Tailwind entrypoint globals.css file look like? What you can do is @import the globals.css from the CSS modules file if it is only extending the default Tailwind styles. e.g.:

/* src/globals.css */
@import "tailwindcss";
@theme {
  /* your own theme overwrites */
}

/* src/prose.module.css */
@import './globals.css' theme(reference);
@import '@fontsource-variable/fira-code' layer(base);

@theme {
  --font-family-mono: 'Fira Code Variable', ui-monospace, SFMono-Regular, Menlo,
    Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
}

.prose h1 {
  @apply text-4xl font-[900] lg:text-5xl font-mono;
}

[mogeko]

It can work by importing globals.css in *.module.css, but there are a lot of redundant duplicates in the compilation results (because globals.css has been imported twice!).

import '../styles/globals.css';
import styles from '../styles/prose.module.css';

// ...

I'd like to explain why I import globals.css here. My usage case is to import globals.css into layout.tsx, and then use prose.module.css separately in the prose.tsx component. So in any case, for each page, globals.css will be imported once.

app
 |- prose
 |   |- layout.tsx
 |   `- page.tsx <- import `prose.module.css` here
 |- layout.tsx <- import `globals.css` here
 `- page.tsx

[philipp-spiess]

@mogeko If your globals.css contains more than just the Tailwind config, you could try creating a separate tailwind.css that only has the config and the imports from tailwind and than both globals.css and prose.module.css could both import tailwind.css so the remaining rules in global.css are not added to prose.module.css.

[boylett]

This seems like a regression considering this was possible in v3 - also quite confusing for the average developer as referencing theme variables via var works fine.

Perhaps we need some sort of intellisense warning on theme and apply calls (other than just complaining that the variable doesn't exist) informing the developer that they need to perform this import?

Or, even better, some kind of flag at the top of a CSS file that encourages the compiler to include it, rather than having to break up CSS imports even further?

Something like @tailwind theme; maybe?

[mitchuman]

I tried extracting only @theme { ... } into theme.css and importing that into globals.css.

Then in the CSS modules stylesheet (Component.module.css) I import as follows, but the error still appears:

Error: Files imported with @import "…" theme(…) must only contain @theme blocks.

/* Component.module.css */
@import '../path/to/theme.css` theme(reference);

.test { ... }

/* globals.css */
@import './theme.css';

@variant ...
@utility ...

/* theme.css */
@import 'tailwindcss'; /* is this import needed here? or in globals.css? */

@theme { ... }

[philipp-spiess]

Hey folks! Going to close this as we've added a new API (@reference "…") so you're able to import Tailwind CSS configs without actually duplicating any CSS: https://tailwindcss.com/docs/functions-and-directives#reference-directive