Does Material-ui's sx property generate optimized utility classes similar to tailwindcss?

Question

when using tailwind css, it gets compiled like this:

<div class="font-bold"></div>
<div class="font-bold"></div>

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 component connects to. created in order to reduce redundant css):

.css-fdjf{
  padding: 4px;
}

// is it generating different classes for same stuff inefficiently or is it efficient like tailwindcss and connects many components to one class to minimize bundle size? I have been hearing that MUI is heavy so I wanted to hear from experienced developers how to optimize MUI for small bundle size.