Add app.css alias for Tailwind CSS v4 add-on

[hyunbinseo]

There is a heated discussion related to using the @apply directive in a Svelte component:

• [v4] @apply inside Svelte / Vue `<style>` not working as expected tailwindlabs/tailwindcss#15205

Without the @reference directive, the following error occurs:

[plugin:@tailwindcss/vite:generate:serve]
Error: Cannot apply unknown utility class: text-red-700

I personally believe this is the best workaround:

// svelte.config.js
const config = {
  kit: {
    // ...
    alias: { '$app.css': './src/app.css' },
  },
};

export default config;

<style>
  @reference "$app.css";
  a {
    @apply text-red-700;
  }
</style>

The ./src/app.css will be hard-coded to the Prettier config file as well, so I guess it can be safely aliased.

• tailwindcssadd property tailwindStylesheet to prettier config when both are installed #507

Note

I do understand that this is only needed for people using the @apply directive, but this seemed to be the desirable place to leave this content.

[benmccann]

I think it's best to stay aligned with the docs: https://tailwindcss.com/docs/installation/framework-guides/sveltekit

I'm not sure that we need to add an extra layer of indirection and alias for $app.css

[manuel3108]

Agree. And since our current template is not scaffolding such a file, I don't think this currently necessary.