[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.

[dkamins]

I tried the solution (using '"css.customData"' setting) from this other thread and it worked well to suppress warnings for .css files (and even add useful Intellisense), but does not seem to be picked up in <style> blocks within .vue files. (I know this current issue is about Svelte, but I imagine the solutions might be similar).

• Unknown at rule @apply css(unknownAtRules) #5258 (comment)

Unfortunately every single recent review on the recommended PostCSS VS Code extension above (entire first page is consistent 1 star reviews) indicates it is outdated, disruptive, and causes more problems than it solves. Are there perhaps alternative solutions for now?

(To be clear, Tailwind is fine and builds fine. This is about how VSCode is flagging warnings eg on @apply like Unknown at rule @applycss (unknownAtRules))