Error starting new project - @layer base is used but no matching @tailwind base directive is present.

[JWeis]

Current Behavior

Upon running the dev server, I receive this error:

[plugin:vite:css] [postcss] postcss-import: /Users/jamesweis/Projects/Cove/cove-svelte/node_modules/@skeletonlabs/skeleton/dist/styles/partials/core.css:3:1: `@layer base` is used but no matching `@tailwind base` directive is present.
/Users/jamesweis/Projects/Cove/cove-svelte/node_modules/@skeletonlabs/skeleton/dist/styles/partials/core.css:3:1
1  |  /* Stylesheet: skeleton.css */
2  |  
3  |  /*
   |   ^
4  |  - Slated to replace `all.css` in the next major release
5  |  - All available stylesheets are imported
CssSyntaxError: [postcss] postcss-import: /Users/jamesweis/Projects/Cove/cove-svelte/node_modules/@skeletonlabs/skeleton/dist/styles/partials/core.css:3:1: `@layer base` is used but no matching `@tailwind base` directive is present.
    at Input.error (/Users/jamesweis/Projects/Cove/cove-svelte/node_modules/postcss/lib/input.js:106:16)
    at AtRule.error (/Users/jamesweis/Projects/Cove/cove-svelte/node_modules/postcss/lib/node.js:115:32)
    at normalizeTailwindDirectives (/Users/jamesweis/Projects/Cove/cove-svelte/node_modules/tailwindcss/lib/lib/normalizeTailwindDirectives.js:72:32)
    at /Users/jamesweis/Projects/Cove/cove-svelte/node_modules/tailwindcss/lib/processTailwindFeatures.js:30:98
    at plugins (/Users/jamesweis/Projects/Cove/cove-svelte/node_modules/tailwindcss/lib/plugin.js:38:63)
    at LazyResult.runOnRoot (/Users/jamesweis/Projects/Cove/cove-svelte/node_modules/postcss/lib/lazy-result.js:357:16)
    at LazyResult.runAsync (/Users/jamesweis/Projects/Cove/cove-svelte/node_modules/postcss/lib/lazy-result.js:286:26)
    at LazyResult.async (/Users/jamesweis/Projects/Cove/cove-svelte/node_modules/postcss/lib/lazy-result.js:160:30)
    at LazyResult.then (/Users/jamesweis/Projects/Cove/cove-svelte/node_modules/postcss/lib/lazy-result.js:436:17
Click outside or fix the code to dismiss.
You can also disable this overlay by setting server.hmr.overlay to false in vite.config.js.

### Expected Behavior

To build an run without errors.

### Steps To Reproduce

1. Follow the current CLI installation instruction OR
2. Follow the Manual installation instructions

### Link to Reproduction / Stackblitz

_No response_

### More Information

_No response_

[Sarenor]

We figured it out on Discord:
https://discord.com/channels/1003691521280856084/1126456275409047613

Downgrading Vite to 4.3.9 fixes this issue.

If it doesn't, make sure you're package.json is actually set to "4.3.9" without a ^ caret in front. Make sure that 4.3.9 is actually installed with npm list.

If it still doesn't work:
Layout.svelte:

<script lang='ts'>
    // Most of your app wide CSS should be put in this file
    import '../app.postcss';
</script>

<slot />

app.postcss:

@import '@skeletonlabs/skeleton/themes/theme-skeleton.css';

@tailwind base;
@tailwind components;
@tailwind utilities;
@tailwind variants;


@import '@skeletonlabs/skeleton/dist/styles/partials/core.css';
@import '@skeletonlabs/skeleton/dist/styles/partials/typography-next.css';
@import '@skeletonlabs/skeleton/dist/styles/partials/elements.css';
@import '@skeletonlabs/skeleton/dist/styles/partials/variants.css';

    /*place global styles here */
html,
body {
    @apply h-full;
}

Basically, recreating skeleton.css yourself in your app.postcss

[JWeis]

@Sarenor thank you so much for the quick response! I can also confirm I am getting the same error in versions 1.8.0 and 1.7.0

[JWeis]

@Sarenor It is working now. Getting a lot of warnings in the console for the placement of @imports, but it is working. Thank you!

[Sarenor]

@JWeis Better fix: Downgrade Vite to 4.3.9.

[JWeis]

@Sarenor, I had Vite 4.3.6 installed as the default. I upgraded to 4.4.0, and it seems to work inline with the current documentation.

[Sarenor]

Huh. Alright, re-adding the fix documentation then. Although downgrading it did fix it for me without having to build the skeleton.css myself.

[johannesbremer]

downgrading fixed it for me as well!

[Sarenor]

Relevant Issue raised with vite: vitejs/vite#13732

[JWeis]

@Sarenor it is working better for me with vite 4.3.9. For some reason, 4.4.0 was working on my test project and then I tried it on a fresh project and I was getting the original error. I just switch to 4.3.9 and it is working as I would expect. Thank you!

[endigo9740]

Just so everyone is aware - we believe the issue to be on Vite's side per the issue @Sarenor raised above. We're monitoring to see how they address. In the meantime we do advise sticking with Vite v4.3.9 for now. Keep an eye on this post and we'll update when we know more.

[Sarenor]

Vite's got a PR open for it already. Seems like we're on the way to a resolution there :)

[Sarenor]

Fixed with "vite": "4.4.2"
New projects should be safe again!

[johannesbremer]

This works for me. Thank you for all your work!

[Sarenor]

Of course. Telling other people that it's their problem is my favorite part of work! ;)