When utilizing Tailwind CSS, it is compiled in the following manner:
<div class="font-bold"></div>
<div class=".font-bold"></div>
This compiles to:
.font-bold{
font-weight: bold;
}
So... when using SX like this:
<Box sx={{ p: 1 }}>One</Box>
<Box sx={{ p: 1 }}>two</Box>
Does it compile like this:
.css-bkjlsd{
padding: 4px;
}
.css-fdsfdffd{
padding: 4px;
}
OR like this (utility class that many components connect to. Created in order to reduce redundant CSS):
.css-fdjf{
padding: 4px;
}
// Is it generating different classes for the same attributes inefficiently or is it efficient like Tailwind CSS and connecting many components to one class to minimize bundle size? I have heard that MUI can be heavy so I am curious to know from experienced developers how to optimize MUI for a smaller bundle size.