[🐞] Error with TailwindCSS 4 when used in Qwik

devcaeg commented 4 months ago

Which component is affected?

Qwik Rollup / Vite plugin

Describe the bug

I'm experimenting with TailwindCSS version 4, but there's an issue when it's used with Qwik. I created an issue in the TailwindCSS repository, but it seems that the problem originates from the Qwik Vite plugin (that's what the issue comments suggest).

TailwindCSS Issue: tailwindlabs/tailwindcss#13112

Reproduction

https://codesandbox.io/p/devbox/loving-glade-zdpd88?file=%2Fsrc%2Froutes%2Findex.tsx

Steps to reproduce

No response

System Info

System:
    OS: macOS 14.3.1
    CPU: (8) arm64 Apple M2
    Memory: 571.66 MB / 16.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 21.6.1 - ~/.nvm/versions/node/v21.6.1/bin/node
    npm: 10.2.4 - ~/.nvm/versions/node/v21.6.1/bin/npm
    pnpm: 8.15.4 - /opt/homebrew/bin/pnpm
    bun: 1.0.30 - /opt/homebrew/bin/bun
  Browsers:
    Chrome: 122.0.6261.111
    Edge: 122.0.2365.63
    Safari: 17.3.1
  npmPackages:
    @builder.io/qwik: 1.5.1 => 1.5.1 
    @builder.io/qwik-city: 1.5.1 => 1.5.1 
    undici: 6.7.0 => 6.7.0 
    vite: 5.1.5 => 5.1.5

Additional Information

No response

PatrickJS commented 4 months ago

conversation from the other thread

gioboa commented 4 months ago

So from this answer there is a space for improvement. From their response this is the piece of code to improve https://github.com/BuilderIO/qwik/blob/c88e53d49dc65020899d770338f4e51f3134611e/packages%2Fqwik%2Fsrc%2Foptimizer%2Fsrc%2Fplugins%2Fvite-server.ts#L102-L126

gioboa commented 4 months ago

Tailwind v3

Tailwind v4

@import "tailwindcss"; inside global.css triggers our code to add that links in the <head>

devcaeg commented 4 months ago

For those interested in continuing to explore TailwindCSS version 4 without encountering this problem, I have shared a temporary and provisional solution in this comment https://github.com/tailwindlabs/tailwindcss/issues/13112#issuecomment-1983444305

devcaeg commented 2 weeks ago

Is there any news about this? It should be noted that this problem only happens in dev mode, when the build is done for production, the error disappears.

gioboa commented 2 weeks ago

Tailwind v4 it's in alpha now Screenshot_20240616-095348 any PRs/solutions are welcome

QwikDev / qwik