@Tailwind Base no longer resolving in imported stylesheets

[Sarenor]

Describe the bug

I'm one of the people helping out with the development & maintenance of Skeleton for Svelte and starting with 4.4.0 of Vite, our way of handling CSS for our users doesn't work as expected anymore.
To make sure the order of imports & initializiation of tailwind layers is correct, we handle it in one of our CSS-Files (skeleton.css which imports tailwind.css which contains the directives) and the user only needs to import skeleton.css.

That approach worked perfectly up until Vite 4.3.9 (Downgrade the Vite version in the reproduction to see how it should actually look or at least used to look).

Now it gives the following error:

[postcss] postcss-import: [...]\my-skeleton-app\node_modules\.pnpm\@[email protected][email protected]\node_modules\@skeletonlabs\skeleton\dist\styles\partials\core.css:3:1: `@layer base` is used but no matching `@tailwind base` directive is present.

Reproduction

https:/Sarenor/vite-tailwind-reproduction

Steps to reproduce

Run (p)npm i, followed by (p)npm run dev, followed by opening the URL displayed in the console, the error should then appear in the console.

System Info

System:
    OS: Windows 10 10.0.22621
    CPU: (16) x64 12th Gen Intel(R) Core(TM) i7-1260P
    Memory: 11.95 GB / 31.71 GB
  Binaries:
    Node: 18.13.0 - C:\Program Files\nodejs\node.EXE
    npm: 9.2.0 - C:\Program Files\nodejs\npm.CMD
    pnpm: 8.6.3 - ~\AppData\Local\pnpm\pnpm.CMD
  Browsers:
    Edge: Spartan (44.22621.1848.0), Chromium (114.0.1823.67)
    Internet Explorer: 11.0.22621.1
  npmPackages:
    vite: 4.4.0 => 4.4.0

Used Package Manager

pnpm

Logs

No response

Validations

• Follow our Code of Conduct
• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Make sure this is a Vite issue and not a framework-specific issue. For example, if it's a Vue SFC related bug, it should likely be reported to vuejs/core instead.
• Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.
• The provided reproduction is a minimal reproducible example of the bug.

[dgrebb]

This has been killing me for the last ~20h. @Sarenor tip of the hat to you for putting in a detailed issue!

For anyone else who finds this, @4.3.9 works as expected.

[xieyuheng]

I meet the same problem with postcss 8.4.25 and vite 4.4.1.

vite v4.4.1 building for production...
✓ 25 modules transformed.
✓ built in 3.39s
[vite:css] [postcss] postcss-import: /home/xyh/mimor-official/mimor/src/styles/scrollbar.css:10:1: `@layer utilities` is used but no matching `@tailwind utilities` directive is present.
file: /home/xyh/mimor-official/mimor/src/styles/index.css:10:1
error during build:
CssSyntaxError: [postcss] postcss-import: /home/xyh/mimor-official/mimor/src/styles/scrollbar.css:10:1: `@layer utilities` is used but no matching `@tailwind utilities` directive is present.
    at Input.error (/home/xyh/mimor-official/mimor/node_modules/postcss/lib/input.js:106:16)
    at AtRule.error (/home/xyh/mimor-official/mimor/node_modules/postcss/lib/node.js:115:32)
    at normalizeTailwindDirectives (/home/xyh/mimor-official/mimor/node_modules/tailwindcss/lib/lib/normalizeTailwindDirectives.js:72:32)
    at /home/xyh/mimor-official/mimor/node_modules/tailwindcss/lib/processTailwindFeatures.js:30:98
    at plugins (/home/xyh/mimor-official/mimor/node_modules/tailwindcss/lib/plugin.js:38:63)
    at LazyResult.runOnRoot (/home/xyh/mimor-official/mimor/node_modules/postcss/lib/lazy-result.js:357:16)
    at LazyResult.runAsync (/home/xyh/mimor-official/mimor/node_modules/postcss/lib/lazy-result.js:286:26)
    at LazyResult.async (/home/xyh/mimor-official/mimor/node_modules/postcss/lib/lazy-result.js:160:30)
    at LazyResult.then (/home/xyh/mimor-official/mimor/node_modules/postcss/lib/lazy-result.js:436:17)

[sapphi-red]

This seems to be affected by #8400. Reverting that PR, makes the reproduction work.

[Sarenor]

Thanks for providing a quick fix!
I don't mean to be a bother, but could you provide an estimated timeline of when it will be included in a bugfix release?

It's a bit of a showstopper for us with every newly set up project via npm create svelte@latest my-app pulling in "vite": "^4.3.6" (and therefore 4.4.1 on install) and breaking our library...

[patak-dev]

@Sarenor the fix has been released in [email protected]

[Sarenor]

Thank you very much!

And sorry for not seeing the already released version...