The unreleased Stylex library Facebook has developed referred to in the article above solves the Sublinear Scaling of CSS problem, without moving the problem to HTML like Tailwind appears to have done.
It identifies where the same styles sheet properties are reused across multiple components and generates the minimum number of classes nessesary.
This could probably be incorporated into the build process for tailwind.
< div className={stylex({
backgroundColor: 'blue',
color: 'black'
})} >
The unreleased Stylex library Facebook has developed referred to in the article above solves the Sublinear Scaling of CSS problem, without moving the problem to HTML like Tailwind appears to have done.
It identifies where the same styles sheet properties are reused across multiple components and generates the minimum number of classes nessesary.
This could probably be incorporated into the build process for tailwind.
< div className={stylex({
backgroundColor: 'blue',
color: 'black'
})} >
< div className={stylex({
backgroundColor: 'blue',
color: 'black',
fontWeight: 'bold'
})} >
Effectively renders to something like
.a {
backgroundColor: 'blue',
color: 'black'
}
.b {
fontWeight: 'bold'
}
< div className="a" >
< div className="a b" >