How To Customize MaterialUI with Tailwind CSS

We learned from our Utility vs Component-Based UI blog that MaterialUI has a different philosophy when it comes to CSS structure. However, that's not to say that you can't still use Tailwind CSS in your MaterialUI projects.

Why Combine Tailwind CSS with MaterialUI?

I'm a firm believer in the utility class structure, however I still like to use the MaterialUI component library primarily due to the large volume of premade components their platform provides. There are some quirks to getting it to work correctly.

Getting Tailwind CSS into MaterialUI

For customizations - MaterialUI typically uses the sx prop for one off customizations as follows:

<Slider
  defaultValue={30}
  sx={{
    width: 300,
    color: 'success.main',
  }}
/>

However, that does us no good because Tailwind CSS operates on classnames! Lucky for us, MaterialUI has a className prop available to all MaterialUI components.

Here is a sample component that we overrode with the Tailwind CSS bg-white class:

<FormControl sx={{ m: 1, minWidth: 180}} className="bg-white">

But Wait there are some "got yas"

As stated in the MaterialUI interoperability guide there are certain edge cases that will make MaterialUI CSS out-render your Tailwind CSS such as nested CSS selectors. To ensure that your Tailwind CSS applies to deeper elements, we recommend reading their interoperability guide.