Enhance <style> Tag to Support Tailwind CSS v4 @apply

[oneezy]

Describe the problem

Tailwind v4 no longer requires you to use postcss and does a lot for you out the box.

However, they require you to repeatedly include @import statements in every Svelte component to use Tailwind CSS v4's @apply which is a lot of repeated boilerplate.

See: TW4 - Using @apply in Svelte

<style>
  @import "tailwindcss/theme" theme(reference);
  @import "../../my-theme.css" theme(reference);

  h1 {
    @apply bg-blue-500 text-white;
  }
</style>

Describe the proposed solution

A cleaner solutions could be...

1. Custom Language Attribute:

Introduce a lang="tw" (or similar) attribute for the <style> tag. This would:

Automatically import the default Tailwind theme ("tailwindcss/theme") when no custom path is provided.
Allow optional specification of a custom theme file directly in the <style> tag.

Default theme:

<style lang="tw">
  h1 {
    @apply bg-blue-500 text-white;
  }
</style>

Custom themes:

<style lang="tw" theme="$lib/my-theme.css">
  h1 {
   @apply bg-blue-500 text-white;
  }
</style>

2. Global Configuration:

Add an option in svelte.config.js to specify a default theme file for all components.

// svelte.config.js

export default {
  kit: {
    // other configs
  },
  css: {
    defaultTheme: "../../my-theme.css", // Use custom theme for all components
  },
};

3. Dynamic Fallback:

Use the theme attribute in the <style> tag if provided.
Otherwise, fallback to the global configuration or the default Tailwind theme ("tailwindcss/theme").

Importance

would make my life easier

[leonidaz]

can this be done with a preprocessor?

e.g. this was posted recently on discord and it replaces the tailwind import statements to the new format. https://discord.com/channels/457912077277855764/837012201444999248/1308158035742691398

It seems that the preprocessor also supports attributes of the <style ...> tag that can be read to conditionally inject whatever you need to have at the top of the css. https://svelte.dev/docs/svelte/svelte-compiler#Preprocessor

I haven't tried it but it seems that by using a custom style preprocessor it would be possible to accomplish what you want.

[oneezy]

@leonidaz awesome thanks for the suggestions! will look into these

[dummdidumm]

Yes, this should definetly be a preprocessor that lives in userland. If it turns out to be well received and used a lot, we can investigate incorporating it into svelte-preprocess. Until then I'm closing this issue - thank you.