What is Mui?
Mui aka material UI is a React UI library that complements React for a fast build. It comes with pre-built React components and a default Material Styled Theme(which is very common in Google products). We can either keep the default theme or override the default ones with ours. With the help of prebuilt components e.g input field, button etc it becomes very easy to build quick builds. Material UI also gives Breakpoints which is very helpful in making the website or web app responsive.
What is tailwind css?
Tailwind CSS is a utility-first CSS framework for rapidly building custom user interfaces. It is a highly customizable, low-level CSS framework that gives you all of the building blocks you need to build bespoke designs without any annoying opinionated styles you have to fight to override
Can we use Mui along with tailwind CSS?
Yes, you can! and the official mui docs mentioned a way to customize mui unstyled base components using tailwind css, so you need to know what is an unstyled component and how they differ from mui core components let's check.
MUI Base vs Material UI
MUI Base features many of the same components as Material UI, but without the Material Design implementation.
MUI Base is not packaged with any default theme or built-in style engine. This makes it a great choice if you need complete control over how your app's CSS is implemented.
You could think of MUI Base as the "skeletal" or "headless" version of Material UI in fact, future versions of Material UI (starting with v6) will use these components and hooks for their foundational structure.
and now you are familiar with the unstyled base components but they are lacking some components from mui core package. If you want to proceed with base components then follow the mui docs to customize with tailwind css else follow this...
How to customize Mui core components with tailwind css?
For that you need to know how you can style a mui component, lets take an example of a mui button component.
The Button comes with three variants: text (default), contained and outlined. The variant props are used to define which variant you wanted. the default color applied on the button is blue by default so you want to customize the color...you can wrap the component with a theme provider and define the primary and secondary color but it takes some additional effort also, you try to style with sx props and you can do the same but need to control all button props classes like hover focus active and so on. You can even customize a button with makestyle hook from mui or using styled-components but this takes a lot of effort. Here comes the lifesaver tailwind CSS, with the help of tailwind CSS you can customize the button component with ease within inline and that's the specialty of tailwind CSS. you can just add a classname="bg black text-white hover:bg-gray-300" and so on... but to achieve this you need to configure some things to override default mui styles and base tailwind styles.
By installing mui and tailwindcss the mui css will be at the bottom of <head> tag in index.html if you look at from the browser console, so we need to inject mui css first so that tailwind can override styles.
For that, you can use injectfirst prop of StyledEngineProvider from mui and wrap this to the app component.
//index.js
import React from "react";
import ReactDOM from "react-dom/client";
import "./index.css";
import App from "./App";
import { StyledEngineProvider } from "@mui/material";
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
<React.StrictMode>
<StyledEngineProvider injectFirst>
<App />
</StyledEngineProvider>
</React.StrictMode>
);
Alright, now you need to add important:"#root" in the config file of tailwind to make sure that tailwind can override other styles.
//tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
content: ["./src/**/*.{js,jsx,ts,tsx}"],
important: "#root",
theme: {
fontFamily: {
advent: ["Advent Pro", "sans-serif"],
},
extend: {},
},
plugins: [],
};
Also, you need to remove the @tailwind base style from the index.css file to clear the base styles from tailwind css.
Hurray! Now you got complete freedom with your design and the ability to create custom designs and components easily with Mui and Tailwind CSS.
Go checkout the codesandbox or github for the configuration code.
Thank you for Reading, If you found this useful feel free to like and connect with me on Linkedin
Happy Coding! 🥂