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-material
Tailwind 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 autoprefixer
Initialize Tailwind CSS by running the following command:
npx tailwindcss init -p
Initializing 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;