[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?

[philipp-spiess]

You're right there should not be any difference, not even the @layer declarations probably. I'll take a look!

[philipp-spiess]

@amir20 Is it possible you share the repro for this? if not, the contents of the main.css file (and all transitively imported stylesheets) would also be a great help. Thanks!

[amir20]

@philipp-spiess The file is here https://github.com/amir20/dozzle/blob/master/assets/main.css. Its fairly minimal. I was hoping to strip the project to bare minimums when I get a chance, but now that work started, I have less time. I'll see what I can do. For now, Dozzle is pretty is to build. pnpm i and pnpm build.

[philipp-spiess]

Thanks! This is super helpful. I was able to track the overhead of the @import "…" reference to the following:

@layer theme,base,components,utilities;@keyframes dropdown-2d619840{0%{opacity:0}}@keyframes rating-2d619840{0%,40%{filter:brightness(1.05)contrast(1.05);scale:1.1}}@keyframes radio-2d619840{0%{padding:5px}50%{padding:3px}}@keyframes progress-2d619840{50%{background-position-x:-115%}}@keyframes skeleton-2d619840{0%{background-position:150%}to{background-position:-50%}}@keyframes toast-2d619840{0%{opacity:0;scale:.9}to{opacity:1;scale:1}}

Trying to find out how the keyframes sneak through there--Can't seem to easily reproduce this in a unit test yet but it's got to do with daisy UI so, looking 👀

[philipp-spiess]

Fix here: #15581

[adamwathan]

v4 does produce a bit more output than v3, specifically because we include CSS variables for all of your theme variables in the output, and all of the new @property definitions we include are bigger than the old approach of just setting those variables on the universal selector:

/* v3 */
*,
::before,
::after {
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x: ;
  --tw-pan-y: ;
  --tw-pinch-zoom: ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position: ;
  --tw-gradient-via-position: ;
  --tw-gradient-to-position: ;
  --tw-ordinal: ;
  --tw-slashed-zero: ;
  --tw-numeric-figure: ;
  --tw-numeric-spacing: ;
  --tw-numeric-fraction: ;
  --tw-ring-inset: ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur: ;
  --tw-brightness: ;
  --tw-contrast: ;
  --tw-grayscale: ;
  --tw-hue-rotate: ;
  --tw-invert: ;
  --tw-saturate: ;
  --tw-sepia: ;
  --tw-drop-shadow: ;
  --tw-backdrop-blur: ;
  --tw-backdrop-brightness: ;
  --tw-backdrop-contrast: ;
  --tw-backdrop-grayscale: ;
  --tw-backdrop-hue-rotate: ;
  --tw-backdrop-invert: ;
  --tw-backdrop-opacity: ;
  --tw-backdrop-saturate: ;
  --tw-backdrop-sepia: ;
  --tw-contain-size: ;
  --tw-contain-layout: ;
  --tw-contain-paint: ;
  --tw-contain-style: ;
}

/* v4 */
@property --tw-translate-x {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}

@property --tw-translate-y {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}

@property --tw-translate-z {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}

@property --tw-space-y-reverse {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}

@property --tw-divide-y-reverse {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}

@property --tw-border-style {
  syntax: "*";
  inherits: false;
  initial-value: solid;
}

@property --tw-leading {
  syntax: "*";
  inherits: false;
}

@property --tw-font-weight {
  syntax: "*";
  inherits: false;
}

@property --tw-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}

@property --tw-shadow-color {
  syntax: "*";
  inherits: false;
}

@property --tw-inset-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}

@property --tw-inset-shadow-color {
  syntax: "*";
  inherits: false;
}

@property --tw-ring-color {
  syntax: "*";
  inherits: false;
}

@property --tw-ring-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}

@property --tw-inset-ring-color {
  syntax: "*";
  inherits: false;
}

@property --tw-inset-ring-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}

@property --tw-ring-inset {
  syntax: "*";
  inherits: false;
}

@property --tw-ring-offset-width {
  syntax: "<length>";
  inherits: false;
  initial-value: 0;
}

@property --tw-ring-offset-color {
  syntax: "*";
  inherits: false;
  initial-value: #fff;
}

@property --tw-ring-offset-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}

30kb is more than I would expect generally, but it is unfortunately a bit bigger in order to take advantage of a lot of this new CSS stuff.

You can shave the difference down a lot by disabling theme variables that you aren't using, like unused colors for example.

[amir20]

Hey @philipp-spiess and @adamwathan, thanks for the great work! It looks like you found the culprit. Adam, that makes sense too. I appreciate the information. I've been working in software long enough to be obsessed with every KB.

I am on the beta now so will update back when the release is available. 🚀

[amir20]

The new patch dropped the size from 157.77 kB to 150.89 kB. While not huge, I'll take it 🍬

[Stephan-MC]

I know I may be late but a suitable solution to reduce css bundled size will be for tailwindcss to add compatibility with sass @use syntax which makes sure every imported module is used only once in the entire bundled css. In this case, your css may be large due to the multiple occurrence of

@import “tailwindcss”;
@import “my-theme” reference;

which may cause the tailwindcss and theme to be included multiple time.