[v4] vite plugin + svelte - inconsistent output style tags causing misaligned CSS layer order #16852

vnphanquang · 2025-02-27T17:28:08Z

vnphanquang
Feb 27, 2025

Description

Hi all, I bumped into an issue today with a vite, svelte+kit, tailwindcss setup, where the style tag containing tailwindcss build output where placed after another style tag after hydration, making the CSS layer declaration unreliable.

This only happens in a project I'm working on with a relatively complex setup, and I couldn't reproduce in a minimal setup. Nor do I know if this is specific to @tailwindcss/vite, or something to do with svelte / vite, or isn't a real problem at all. So this is my best attempt to document my findings in case someone runs into similar situation or has some better insight. Sorry in advance for the lengthy text.

Reproduction

Imagine this setup:

<!-- some svelte file -->
<script>
    import './app.css';                   // typically in a layout / parent
    import Button from './Button.svelte'; // shared across pages / components
</script>

<Button />

where app.css is the typical entry CSS containing @import 'tailwindcss', and Button.svelte is:

<button> Click me </button>

<style>
  @layer components {
    button {
      color: green;
    }
  }
</style>

Notice @layer components. In my particular setup, after hydration kicks in, the CSS output of the Button component above were placed before the style tag containing tailwind CSS build output, something like this:

<head>
  <style type="text/css">
    @layer components {
      button.s-FXChyZpjAcsc {
        color: green;
      }
    }
  </style>

  <style type="text/css">
     /*! tailwindcss v4.0.9 | MIT License | https://tailwindcss.com */
     @layer theme, base, components, utilities;
     
     /* ...truncated... */
  </style>
</head>

So now, @layer components were used first before the actual layer declaration by tailwind, hence components has lower priority than base, causing clash with tailwindcss preflight in this particular use case, because button { color: inherit } in the base layer gets applied instead.

tailwindcss/packages/tailwindcss/preflight.css

Lines 246 to 260 in 66ef77c

    
           button, 
        
           input, 
        
           select, 
        
           optgroup, 
        
           textarea, 
        
           ::file-selector-button { 
        
             font: inherit; /* 1 */ 
        
             font-feature-settings: inherit; /* 1 */ 
        
             font-variation-settings: inherit; /* 1 */ 
        
             letter-spacing: inherit; /* 1 */ 
        
             color: inherit; /* 1 */ 
        
             border-radius: 0; /* 2 */ 
        
             background-color: transparent; /* 3 */ 
        
             opacity: 1; /* 4 */ 
        
           }

Further Discussion

Important

Again, this particular problem only happens after hydration, in development for me. In other words, if JS is turned off (and the page is pre-rendered), the correct order is observed.

However, this suggests that the order for these style tags in build output is non-deterministic, or at least there are pitfalls that would cause similar problem reported above. One example would be loading another style tag from a third-party that uses the same CSS layers. And if so, I think this should be communicated somewhere in the docs (if it isn't already - I couldn't find it)

Workaround

For now, my workaround is to add the layer declaration manually before everything else, inline in the head tag for example:

<head>
   <!-- add manually, outside of any framework -->
   <style type="text/css">
     @layer theme, base, components, utilities;
   </style>
</head>

Environment

Output of npx envinfo --system --npmPackages svelte,vite,tailwindcss,@tailwindcss/vite --binaries --browser:

  System:
    OS: Linux 6.12 Arch Linux
    CPU: (4) x64 Intel(R) Core(TM) i5-4590 CPU @ 3.30GHz
    Memory: 2.10 GB / 15.56 GB
    Container: Yes
    Shell: 3.7.1 - /usr/bin/fish
  Binaries:
    Node: 22.14.0 - ~/.volta/tools/image/node/22.14.0/bin/node
    Yarn: 4.5.1 - ~/.volta/tools/image/yarn/4.5.1/bin/yarn
    npm: 10.9.2 - ~/.volta/tools/image/node/22.14.0/bin/npm
    pnpm: 10.2.1 - ~/.volta/bin/pnpm
  npmPackages:
    @tailwindcss/vite: ^4.0.9 => 4.0.9
    svelte: ^5.20.5 => 5.20.5
    tailwindcss: ^4.0.9 => 4.0.9
    vite: ^6.2.0 => 6.2.0

wongjn · 2025-02-27T17:32:12Z

wongjn
Feb 27, 2025
Collaborator

Do you have a global CSS file anywhere? Typically, you should have @import "tailwindcss"; in some global CSS stylesheet. If you then need to use Tailwind features in a <style> block, you'd use @reference, not @import. Though as per the documentation:

If you're using Tailwind with these tools, we recommend avoiding <style> blocks in your components and just styling things with utility classes directly in your markup, the way Tailwind is meant to be used.

1 reply

vnphanquang Feb 27, 2025
Author

@wongjn hey thanks for the input. The issue isn't related to using tailwind semantics in style tag but the clashing of CSS layers due to the build /serve process. As i mentioned, there might be nothing intrinsically wrong with tailwind here, it's just a bit unexpected and should raise caution when used with another source of CSS that also uses CSS layers.

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Uh oh!

[v4] vite plugin + svelte - inconsistent output style tags causing misaligned CSS layer order #16852

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{editor}}'s edit

{{editor}}'s edit

Uh oh!

Replies: 1 comment 1 reply

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Select a reply

Uh oh!

Uh oh!

[v4] vite plugin + svelte - inconsistent output style tags causing misaligned CSS layer order #16852

Uh oh!

Uh oh!

vnphanquang Feb 27, 2025

Description

Reproduction

Further Discussion

Workaround

Environment

Replies: 1 comment · 1 reply

Uh oh!

wongjn Feb 27, 2025 Collaborator

Uh oh!

vnphanquang Feb 27, 2025 Author

vnphanquang
Feb 27, 2025

Replies: 1 comment 1 reply

wongjn
Feb 27, 2025
Collaborator

vnphanquang Feb 27, 2025
Author