[v4] Something has broken since alpha.15, causing imports in CSS files and vite URL imports to not work

[bitofbreeze]

What version of Tailwind CSS are you using?

v4.0.0-alpha.25

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

vite 5.4.8

What version of Node.js are you using?

bun 1.1.27

What browser are you using?

Chrome

What operating system are you using?

macOS

Reproduction URL

Unfortunately Stackblitz doesn't support creating a repro since it can't run the tailwind wasm module used in the @tailwindcss/vite plugin.

Describe your issue

With v4.0.0-alpha.15, I can have a css file that does:

@import "tailwindcss";
@import "common/base.css";

and use that stylesheet as a vite URL import:

import stylesUrl from "./root.css?url";

However, when I just upgrade to v4.0.0-alpha.25, I get

1. Uncaught SyntaxError: The requested module '/app/root.css?url' does not provide an export named 'default' because the vite URL imports have broken.

If I just import normally without the URL suffix (import "./root.css";),

2. Now not all the styles from common/base.css which is imported in ./root.css apply, and trying to do something basic like reassign a CSS variable in ./root.css no longer works:

@theme {
	--color-bg: orange;
}

That works back on v4.0.0-alpha.15.

Please let me know if I can provide more info, or if instead of Stackblitz, there is another provider that does support wasm.

[philipp-spiess]

Hey @bitofbreeze!

The first error you posted there suggest that you're trying to load the CSS file like a JavaScript file. Regarding the other question: Do you mind sharing the repro as a small minimal setup in a repo on GitHub maybe or in any other way so we can take a closer look?

[bitofbreeze]

@philipp-spiess Yes absolutely. Here is a repo with repros of both issues I encountered in alpha.25 that worked perfectly in alpha.15: https://github.com/bitofbreeze/tailwind-v4

Please search for "Begin Issue" to find both issues. You can run the code by doing bun i and then bun run dev. You can first check out both issues in alpha.25 which is what is currently installed. Then you can downgrade to alpha.15 and try both again and see they work. Please let me know if I can provide any more details.

[philipp-spiess]

Thanks a ton for this! The handling of file.css?url is indeed unexpected, it seems like Vite does not give us the expected hook here. Will dig more into this. The other issue is a bug that I'll fix up shortly. Should be out in the next patch version.

[lean-dev]

Probable related problem here with the style-url import. Nailed it down to the alpha-22 release. My question in Discord was:

From alpha-22 on my remix-vite-tailwind-vite-plugin-v4 app (early developing stage) breaks with some postcss error "unknown word". Probably cause of tailwind changed to be a preprocessor and postcss of course does not expect "export styles ... "

My question: From alpha-22 on i need to import my tailwind styles file with a side effect import to keep the build (dev - prod not tested) working.
Is there anything i can change in the remix or vite-config to keep the style-url/remix-links import working?

[aaronadamsCA]

I think we're having a related problem, this minimal example stopped working as of v4.0.0-alpha.25:

import { compile } from "tailwindcss";
import theme from "tailwindcss/theme.css?raw";

import utilities from "./utilities.css?raw";

interface Compiler {
  build: (candidates: string[]) => string;
}

export async function createCompiler(): Promise<Compiler> {
  console.log({ theme, utilities });

  return compile(`
    @media theme(reference inline) {
      ${theme}
    }

    ${utilities}

    @tailwind utilities;
  `);
}

We're using static asset imports to bake CSS into a custom compiler at build time. With @tailwindcss/vite enabled, during vite dev the console shows { theme: undefined, utilities: undefined }. For now the only workaround seems to be to disable the Tailwind Vite plugin.

[sandros94]

I can only speak in relation to nuxt/ui#2263, but I would like to document it anyway.

The issue we were facing was related to upgrading from alpha.24 to alpha .25, and something we have missed was the removal of automatic var(…) injection in #13657.

Again, this might not be directly related to this issue. But still, the output we were given was about vite import issues, and fixing up some var(...) made everything work.

[philipp-spiess]

Hey folks! Just wanted to let you know that we've landed a fix for the ?url and ?raw imports that's part of the latest patch release! Once you upgrade @tailwindcss/vite and taiwlindcss it should work again. Sorry for the troubles and please let me know if you still run into any issues!

[bitofbreeze]

Just gave it a try and still getting issues:

[app] 11:57:05 PM [vite] Internal server error: [postcss] /apps/git-sell/app/root.css:2820:1: Unexpected }
[app]   Plugin: vite:css
[app]   File: /apps/git-sell/app/root.css:2820:0
[app]       at Input.error (/node_modules/postcss/lib/input.js:106:16)
[app]       at Parser.unexpectedClose (/node_modules/postcss/lib/parser.js:585:22)
[app]       at Parser.end (/node_modules/postcss/lib/parser.js:330:12)
[app]       at Parser.parse (/node_modules/postcss/lib/parser.js:454:16)
[app]       at parse (/node_modules/postcss/lib/parse.js:11:12)
[app]       at new LazyResult (/node_modules/postcss/lib/lazy-result.js:133:16)
[app]       at Processor.process (/node_modules/postcss/lib/processor.js:53:14)
[app]       at compileCSS (file:///node_modules/vite/dist/node/chunks/dep-CDnG8rE7.js:36860:59)
[app]       at async TransformPluginContext.transform (file:///node_modules/vite/dist/node/chunks/dep-CDnG8rE7.js:36141:11)
[app]       at async PluginContainer.transform (file:///node_modules/vite/dist/node/chunks/dep-CDnG8rE7.js:49034:18)
[app]       at async loadAndTransform (file:///node_modules/vite/dist/node/chunks/dep-CDnG8rE7.js:51867:27)
[app]       at async viteTransformMiddleware (file:///node_modules/vite/dist/node/chunks/dep-CDnG8rE7.js:61824:24)

Let me know if a repro is needed again. Maybe just upgrading the previous one would show the issue, but I haven't tried yet. Thanks for the quick turnaround.

[philipp-spiess]

@bitofbreeze The repro you provided seems to work fine with 4.0.0-alpha.29, I only had to update the import to use a relative path (a necessary change that we're making to our import resolver to make it faster to resolve imports):

The stack trace also doesn't seem to have Tailwind CSS in it so a repro would be greatly appreciated, thank you!

[bitofbreeze]

Oh I had an absolute import that was causing it. Thanks for letting me know, that fixed it!