Use this repository to follow along with the Creating your own Web App series.
- Click on the 
button, follow the steps to clone this template giving the repository a name of your choice.
-
If the above button doesn't appear, then download the ZIP file (
→ Download ZIP)
- Run the npm install command in the root directory of the project to install all dependencies of the project.
To recreate this template you can follow the steps below:
Create your first Next.js app by running the following command:
npx create-next-app <app-name>Replacing <app-name> with the name of your app.
Material-UI is a React UI library for building user interfaces.
You can add Material-UI and Material Icons to your project by running the following command:
npm install @mui/material @emotion/react @emotion/styled @mui/icons-materialTailwind CSS is a utility-first CSS framework for styled-components.
To add Tailwind CSS to your project, run the following command:
npm install -D tailwindcss postcss autoprefixerInitialize Tailwind CSS by running the following command:
npx tailwindcss init -pInitializing tailwindcss will create a tailwind.config.js file in your project. By default, Tailwind CSS will watch only .html files in your project.
You can extend the default configuration by adding your own customizations to the tailwind.config.js file and editing the content property like so:
/** @type {import('tailwindcss').Config} */
module.exports = {
content: [
"./pages/**/*.{js,ts,jsx,tsx}",
"./components/**/*.{js,ts,jsx,tsx}",
],
theme: {
extend: {},
},
plugins: [],
};Finally, add the following Taiwind directives to your CSS file:
@tailwind base;
@tailwind components;
@tailwind utilities;Now for tailwind to work nicely with Material UI, we need to perform a few extra steps as by default some style properties of both fight for precedence causeing unwanted results.
An indepth interoperability guide can be found here.
Add the following as the corePlugins property of your tailwind.config.js file:
module.exports{
corePlugins: {
preflight: false,
},
}Add the important option, using the id of your app wrapper. For example, #__next for Next.js:
module.exports{
important: "#__next",
}As a final step, we need to fix the CSS injection order.
Most CSS-in-JS solutions inject their styles at the bottom of the HTML <head> tag, which gives MUI precedence over Tailwind CSS.
To reduce the need for the important property, you need to change the CSS injection order.
Here's how it can be done in MUI by editing the <App> component in pages/_app.js:
import "../styles/globals.css";
import { StyledEngineProvider } from "@mui/material/styles";
function MyApp({ Component, pageProps }) {
return (
<StyledEngineProvider injectFirst>
<Component {...pageProps} />
</StyledEngineProvider>
);
}
export default MyApp;