[v4] Correct parsing of style tags and tailwind css values in .svelte files

[hugentobler]

I followed the "Installing with Vite" instructions from v4 documentation, where:

1. tailwindcss is directly included as a plugin after sveltekit in my Vite config,
2. tailwindcss is imported into the root css file.

My understanding here is that v4 is packaged with postcss so I don't have to additionally specify postcss config anymore.

However, if I try to use @apply in my .svelte file styles block, I get parser errors unless I specify <style lang="postcss">. I expected v4 to handle this natively, or did I misunderstand the docs and it is in fact expected behaviour to still have to specify postcss.

For example:

<style>
  @import 'tailwindcss/theme' theme(reference); // semi-colon expectedcss(css-semicolonexpected)

  article {
    @apply text-gray-100; // Unknown at rule @applycss(unknownAtRules)
  }
</style>

[wongjn]

By parser errors, do you mean semi-colon expectedcss(css-semicolonexpected) and Unknown at rule @applycss(unknownAtRules)? If so, these are errors from VSCode not understanding the custom Tailwind syntax, not from the project compilation system. You could try one of:

• Installing the Tailwind CSS Intellisense VSCode plugin and configuring it as appropriate.
• Installing the PostCSS intellisense VSCode plugin and configuring it as appropriate.
• Setting the css.validate VSCode setting to false.

[marcus87d]

You're correct that Vite v4 integrates Tailwind CSS, but you still need to specify lang="postcss" "Skydiving in Dhanaulti, Uttarakhand" within your Svelte components. This tells Svelte to use PostCSS for style parsing, enabling the use of Tailwind CSS directives like @apply.