[v4] @apply inside Svelte 5 <style> not working as expected

[lucas-subli]

What version of Tailwind CSS are you using?

tailwindcss: 4.0.0-beta.2
@tailwindcss/vite: 4.0.0-beta.2

What build tool (or framework if it abstracts the build tool) are you using?

svelte: 5.2.9
sveltekit: 2.8.5

What version of Node.js are you using?

v20.17.0

What browser are you using?

Chrome, Firefox

What operating system are you using?

Ubuntu 24.04

Reproduction URL

Public github:
https://github.com/lucas-subli/svelte-5-tailwind-4-beta

pnpm install
pnpm dev --open

Describe your issue

This code:

<h1 class="text-red-500">This is red</h1>
<h1 class="red">This should be red</h1>

<style>
  .red {
      @apply text-red-500;
  }
</style>

Generates this result:

With this error:

[plugin:vite-plugin-svelte] Error while preprocessing /home/lucas/Workspace/stuff/svelte-5-tailwind-4-beta/src/routes/+page.svelte - Cannot apply unknown utility class: text-red-500

@apply inside svelte <style> does not work properly.

After this PR: #14151
The below will work:

<style global>
  @import 'tailwindcss';

  .red {
      @apply text-red-500;
  }
</style>

However, flagging the style as global and importing 'tailwindcss' in every component I want to use @apply is not a reasonable solution.

The PR mentioned above also has a comment stating:

// In practice, it is not recommended to use `@tailwind utilities;` inside
// Svelte components. Use an external `.css` file instead.

However, this does not seem to work, as seen in the provided reproduction URL, where tailwind is imported by app.css and made available through +layout.svelte — as previously done with tailwind 3 + SvelteKit.