What version of Tailwind CSS are you using?

v4.2.2

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

Vite 8.0.3

What version of Node.js are you using?

v24.14.0

What browser are you using?

Chrome

What operating system are you using?

macOS

Reproduction URL

https://github.com/balthild/twcss-repro

Describe your issue

Normally, the CSS layers in a project using tailwind should be

• 5: implicit outer layer
  • 0: properties
  • 1: theme
  • 2: base
  • 3: components
  • 4: utilities

Which could be checked in the browser devtools.

However, if a @layer component {} is added into a <style> block of Vue or Svelte component, for example,

<style>
  @reference "tailwindcss";

  @layer components {
    .my-class-in-style {
      @apply border border-black;
    }
  }
</style>

The CSS layers will be messed up. In my case, it becomes

• 5: implicit outer layer
  • 0: properties
  • 1: components
  • 2: theme
  • 3: base
  • 4: utilities

This causes some styles in component layer be overridden by base.

A workaround would be manually specifying the correct order in every <style> block with @layer rule,

<style>
  @reference "tailwindcss";
  @layer properties, theme, base, components, utilities;

  @layer components {
    .my-class-in-style {
      @apply border border-black;
    }
  }
</style>

But tailwind compiler should handle this case, maybe by adding the @layer rule automatically.