Utilities with tailwind

[gfellerph]

Utilities are a real time saver in development. They enable flexible adaptions of a specific design. Unfortunately, they are responsible for a substantial portion of our CSS output. 99% of the generated classes will never be used. This amounts, considering 8 million loads per month (header loads mean), to almost 3TB of unused code shipped per year.

post-external.css.zip with utilities: 77KB
post-external.css.zip without utilities: 44KB

Used b7ea821 to compile.

Analysis

The post.ch homepage is using 7% (500KB unused) of the loaded main.min.css file (29.11.2024).

Recommendations

tailwind.css is a tool that enables using utilities (and other things) where they are needed without adding all of them to the output. Should we start pushing for adoption through blueprint implementation and architecture involvment?

[alizedebray]

+ Optimization of utilities
+ No compromise between flexibility and performance

- Potential delay in Tailwind adoption across the Post projects
- Additional effort outside of the Design System

? Learning curve for project teams
? Build performance
? Migration effort