[v4] Upgrading to tailwind v4 produces a larger css than v3.

[amir20]

Hello all,

This is not easy for me to reproduce because it's very unique to my application. After upgrading to v4, I noticed the css file is about 30KB bigger.

in my master branch:

❯ nr build | grep css
dist/assets/main-DU64dz8Q.css.br    16.40 kB
dist/assets/main-DU64dz8Q.css      124.99 kB │ gzip:  19.79 kB

However, in my new branch with dasiy v5 and tailwind v4:

❯ nr build | grep css                                                                                                                                                                                               
dist/assets/main-C49OPwit.css.br    22.27 kB
dist/assets/main-C49OPwit.css      154.52 kB │ gzip:  27.09 kB

I have attached the file:

main-C49OPwit.css.zip

Looking at the file, I see a lot of @layer theme,base,components,utilities. I have a lot of Vue components and while I have tried to minimize usage of @apply, there were about a dozen that I couldn't convert. For example,

<style>
@import "@/main.css" reference;
[data-level="debug"],
[data-level="trace"] {
  @apply !bg-purple;
}

[data-level="info"] {
  @apply !bg-green;
}

[data-level="error"],
[data-level="fatal"] {
  @apply !bg-red;
}

[data-level="warn"] {
  @apply !bg-orange;
}
</style>

Possibly related to #15228 @philipp-spiess

[philipp-spiess]

@amir20 Hey! Do you have any idea what the difference in filesize could be? I downloaded the file and @layer theme, base, components, utilities; is "only" repeated 16 times which does not explain the 30KB difference. It's possible that more utility classes are generated then in your previous setup due to auto-content detection looking at more files. Could that be the case?

I couldn't convert. For example [...]

Maybe I'm missing something but this seems like it can be converted by using the CSS variables created in the file:

<style>
[data-level="debug"],
[data-level="trace"] {
  background-color: var(--color-purple) !important;
}

[data-level="info"] {
  background-color: var(--color-green) !important;
}

[data-level="error"],
[data-level="fatal"] {
  background-color: var(--color-red) !important;
}

[data-level="warn"] {
  background-color: var(--color-orange) !important;
}
</style>

[amir20]

Hi @philipp-spiess! Thanks for the reply! You are right that I could have used var(--color-xxx). In v3, I didn't have all my colors setup, but in v4 I can do that. 🚀

I am trying to figure out what is the best way to help us debug. The problem is that in v4, I have also upgrade DasiyUI to v5. So it wouldn't really be a fair comparison.

I think what I'll do is change one of the Vue @apply to what you suggested. Compare the two CSS and post them here.

How does that sound? Is there a better way?

[amir20]

Hey @philipp-spiess,

I did

diff --git a/assets/components/LogViewer/LogLevel.vue b/assets/components/LogViewer/LogLevel.vue
index 2736a509..76394a61 100644
--- a/assets/components/LogViewer/LogLevel.vue
+++ b/assets/components/LogViewer/LogLevel.vue
@@ -11,7 +11,6 @@ defineProps<{
 </script>
 
 <style scoped>
-@import "@/main.css" reference;
 [data-position="start"] {
   border-radius: 0.5em 0.5em 0 0;
   height: 70%;

With the following sizes:

❯ nr build | grep \\.css  
dist/assets/main-GsNCa68D.css.br                       22.76 kB
dist/assets/main-GsNCa68D.css                         157.77 kB │ gzip:  27.68 kB

❯ nr build | grep \\.css  
dist/assets/main-BVfC_e4V.css.br                       22.76 kB
dist/assets/main-BVfC_e4V.css                         157.32 kB │ gzip:  27.65 kB

That's a difference of ~400b. Which is a lot more than @layer theme, base, components, utilities;.

Removed main-reference-removed.css.zip
Original main-original.css.zip

I guess at this point, I can try to create a minimal working example to see what the difference is. But I'd need more time.