[v4] Files imported with @import "…" theme(…) must only contain @theme blocks

[amir20]

What version of Tailwind CSS are you using?

tailwindcss 4.0.0-beta.2

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

vite 6.0.1

What version of Node.js are you using?

v23.1.0

What browser are you using?

NA

What operating system are you using?

macOS

Reproduction URL

I am not sure how to create Vue components with Tailwind Play. I have a reproducible example locally with only a few files.

1. Created a new blank project using vite with Vue. eg npm create vite@latest
2. Followed the directions to add Tailwind v4.
3. Update Vue css to have @import

<style scoped>
@import "../style.css" theme(reference);

.test {
    @apply mb-4 bg-foo;
}
</style>

styles.css

@import "tailwindcss";

@theme {
    --color-foo: oklch(0.99 0 0);
}

@layer {
}

Describe your issue

build throws the following exception:

vite v6.0.1 building for production...
✓ 12 modules transformed.
x Build failed in 84ms
error during build:
[@tailwindcss/vite:generate:build] Files imported with `@import "…" theme(…)` must only contain `@theme` blocks.
file: /Users/amirraminfar/Desktop/my-project/src/components/HelloWorld.vue?vue&type=style&index=0&scoped=0cb914fb&lang.css
    at file:///Users/amirraminfar/Desktop/my-project/node_modules/.pnpm/[email protected]/node_modules/tailwindcss/dist/lib.mjs:24:2929
    at D (file:///Users/amirraminfar/Desktop/my-project/node_modules/.pnpm/[email protected]/node_modules/tailwindcss/dist/lib.mjs:3:3654)
    at D (file:///Users/amirraminfar/Desktop/my-project/node_modules/.pnpm/[email protected]/node_modules/tailwindcss/dist/lib.mjs:3:3812)
    at D (file:///Users/amirraminfar/Desktop/my-project/node_modules/.pnpm/[email protected]/node_modules/tailwindcss/dist/lib.mjs:3:3604)
    at D (file:///Users/amirraminfar/Desktop/my-project/node_modules/.pnpm/[email protected]/node_modules/tailwindcss/dist/lib.mjs:3:3604)
    at D (file:///Users/amirraminfar/Desktop/my-project/node_modules/.pnpm/[email protected]/node_modules/tailwindcss/dist/lib.mjs:3:3604)
    at file:///Users/amirraminfar/Desktop/my-project/node_modules/.pnpm/[email protected]/node_modules/tailwindcss/dist/lib.mjs:24:2887
    at D (file:///Users/amirraminfar/Desktop/my-project/node_modules/.pnpm/[email protected]/node_modules/tailwindcss/dist/lib.mjs:3:3654)
    at D (file:///Users/amirraminfar/Desktop/my-project/node_modules/.pnpm/[email protected]/node_modules/tailwindcss/dist/lib.mjs:3:3604)
    at D (file:///Users/amirraminfar/Desktop/my-project/node_modules/.pnpm/[email protected]/node_modules/tailwindcss/dist/lib.mjs:3:3604)
 ELIFECYCLE  Command failed with exit code 1.

Note: This was originally found in my project. So I created a small example using npm create vite@latest and it is still happening.

[adamwathan]

Hey! Solution for now is to move your custom @theme stuff to a separate file and then do this:

<style scoped>
@import "tailwindcss/theme" theme(reference);
@import "../custom-theme.css" theme(reference);

.test {
    @apply mb-4 bg-foo;
}
</style>

This definitely sucks though after using it ourselves so I want to make it possible to just do this:

<style scoped>
@import "../style.css" reference;

.test {
    @apply mb-4 bg-foo;
}
</style>

...especially since there could be other things defined in there that need to be available like custom @utility and @variant definitions.

[Alma219Way]

Hello!
The solution worked for me thanks to the community and the members for the solution. Prepaid Gift Balance

[amir20]

Thanks @adamwathan! For my actual project, I am using @config '../tailwind.config.ts';. So I'll have to see if this works.

Agreed that this is definitely not ideal. Hopefully, no @import are needed in the future. Related discussion #15205