low performance with tailwind..

[musen34]

page load speed becomes slow (especially on iOS devices) as the items in the list get larger like 400. I don't have a problem on a different page with the same count of elements, written in Pure CSS.

And also, when I swipe up and down faster, sometimes there is no items seen while moving screen (iOS). But there is no problem on pure css..

If items count 20-30, there is no problem..

How can I improve/optimize Tailwind performance?

[musen34]

Update

When I remove below lines in :before block in .css (via manual edit .css file) its become faster.

--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-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: ;

[adamwathan]

Hey! Try this:

// tailwind.config.js
module.exports = {
  experimental: {
    optimizeUniversalDefaults: true
  }
 // ...
}

We wanted to make this the default for v3 but it doesn't play nicely with CSS modules or Vue/Svelte style blocks :/ We always use that option ourselves though.

[dfallman]

Have to try this one -- we're experiencing abysmal performance on just a couple of 100 lines using drop-shadow-sm

To the point where this is causing incredibly poor performance in Safari and iOS Safari in particular -- up to the point of crashing the page!

We're using Tailwind 3.x and Alpine.js

This seems to be related to the tag being used 100s of times on the page -- in a scenario where it's just used once (such as in a wrapper div -- it's nowhere near as bad.

Assuming this is more of a browser issue but maybe this solution should be promoted more?

[miraclebakelaser]

I've been tearing my hair out with the terrible scroll performance for the longest time. Tried using window virtualization, nope. optimizeUniversalDefaults did nothing for me on tailwind 3.4.3. However, swapping out drop-shadow-* with the css equivalents has worked to make scrolling content render properly. I only had 7 drop-shadow-* classes and it still caused very poor performance.

Considering drop-shadows without tailwind works, I'd consider this a bug.

[dfallman]

That's interesting, will try that on our system. Do you use css classes for this outside of tailwind or do you make a custom tailwind class using [] or doesn't it matter?

[dfallman]

Just to follow up, I did some test earlier today just converting all the drop-shadow classes we were using in a project into something like:

.yes-drop-shadow {
   @apply [filter:drop-shadow(0_1px_2px_rgb(0_0_0_/_0.1))_drop-shadow(0_1px_1px_rgb(0_0_0_/_0.06))];
}

I can't be 100% sure as there are a few other variables involved, but it seems like this is improving browser performance and there's also less of some strange flickering issues we've had with html5 drag and drop that could be attributed to the browser not being able to draw the page correctly / quickly enough... again, these are very preliminary results and I can't yet be sure it's this, but yes, looks like it could be a bug to me too.

[bilogic]

how do we add optimizeUniversalDefaults to style.css in Tailwind 4?

[wmertens]

what does optimizeUniversalDefaults do exactly? There's no documentation.

[alex-jitbit]

found some info here #4850