Migrate to Tailwind CSS v4

[hyunbinseo]

• IntelliSense for custom components using the CSS configuration file
• Silence svelte-check warnings for CSS @reference, @applyrules:
• Specifying your Tailwind stylesheet path (Tailwind CSS v4+)
• Use justify-center-safe for the container component. reference

Warn: Unknown at rule @reference (css)
<style>
  @reference "$app.css";
  a {

Warn: Unknown at rule @apply (css)
  a {
    @apply underline underline-offset-4 hover:decoration-2;    
  }

References

• `css_unused_selector` using `@apply` inside `<style>` (Tailwind v4) sveltejs/svelte#14916
• [v4] @apply inside Svelte / Vue `<style>` not working as expected tailwindlabs/tailwindcss#15205
• Tailwind IntelliSense does not list my custom class in @layer Utilities tailwindlabs/tailwindcss-intellisense#227 (comment)

[hyunbinseo]

css_unused_selector warning can be worked around using the new @reference API

• `css_unused_selector` using `@apply` inside `<style>` (Tailwind v4) sveltejs/svelte#14916 (comment)

[hyunbinseo]

Tailwind CSS v4 has been released

• https://tailwindcss.com/blog/tailwindcss-v4
• https://x.com/adamwathan/status/1882219476600635677

[hyunbinseo]

sv@0.6.19 now uses Tailwind CSS v4

• feat: add tailwindcss 4.0 sveltejs/cli#422

[hyunbinseo]

Utilize the alias feature, and reference the app.css file in Svelte components that use the @apply directive

• Add app.css alias for Tailwind CSS v4 add-on sveltejs/cli#515

[hyunbinseo]

Either add lang="postcss" to each of your <style> tags where you plan on using the Tailwind CSS directives such as @apply, or disable CSS diagnostics completely by adding "svelte.plugin.css.diagnostics.enable": false within your settings.

https://github.com/sveltejs/language-tools/blob/master/docs/preprocessors/other-css-preprocessors.md#tailwindcss