next.js material ui tilewind css

by | Sep 23, 2024 | Technology

To set up a Next.js project with Material-UI (now called MUI) and Tailwind CSS, you can follow these steps to integrate both MUI’s component library and Tailwind’s utility-first CSS framework seamlessly.

1. Set Up a New Next.js Project

If you don’t have a Next.js project already, you can create one by running:

bash
npx create-next-app my-next-app
cd my-next-app

2. Install MUI (Material UI) and Emotion

MUI relies on @emotion/react and @emotion/styled for styling, so you’ll need to install these packages along with MUI.

bash
npm install @mui/material @emotion/react @emotion/styled @mui/icons-material

3. Install Tailwind CSS

To install and configure Tailwind CSS in a Next.js project, follow these steps:

Install Tailwind and Dependencies

bash
npm install tailwindcss postcss autoprefixer
npx tailwindcss init -p

This will create a tailwind.config.js and postcss.config.js file.

Configure tailwind.config.js

Update the tailwind.config.js file to enable Tailwind for your project:

javascript
/** @type {import('tailwindcss').Config} */
module.exports = {
content: [
'./pages/**/*.{js,ts,jsx,tsx}',
'./components/**/*.{js,ts,jsx,tsx}',
],
theme: {
extend: {},
},
plugins: [],
};

This ensures that Tailwind will scan the pages and components directories for classes to include in the build.

Add Tailwind to globals.css

In your styles/globals.css file, add the following lines to import Tailwind’s base, components, and utilities styles:

css
/* styles/globals.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

4. Using Tailwind with Material UI

You can now use both MUI components and Tailwind CSS classes in your Next.js app. Here’s an example of how to combine them:

Create a New Page (e.g., index.js)

jsx
// pages/index.js
import React from 'react';
import Button from '@mui/material/Button';

export default function Home() {
return (
<div className="flex items-center justify-center min-h-screen bg-gray-100">
<div className="p-10 bg-white rounded-lg shadow-md text-center">
<h1 className="text-3xl font-bold text-gray-800 mb-4">
Welcome to Next.js with MUI and Tailwind
</h1>
<Button variant="contained" color="primary">
Material UI Button
</Button>
<p className="text-gray-600 mt-4">Styled with Tailwind CSS</p>
</div>
</div>
);
}

In this example:

  • The Button component comes from Material UI.
  • The container and text styling use Tailwind CSS classes such as flex, items-center, min-h-screen, text-3xl, etc.

5. Customizing MUI with Tailwind Classes

You can apply Tailwind CSS classes to MUI components using the sx prop or by customizing the className if necessary.

For example:

jsx
import Button from '@mui/material/Button';

export default function CustomButton() {
return (
<Button
variant="contained"
sx={{ padding: '10px', backgroundColor: '#4caf50', '&:hover': { backgroundColor: '#388e3c' } }}
className="rounded-lg text-lg"
>
Tailwind with MUI
</Button>
);
}

In this example:

  • The MUI sx prop is used to apply custom styles, while Tailwind’s className is used for general styling such as border-radius (rounded-lg) and text size (text-lg).

6. Setting Up Global Styles

If you want to use Material-UI’s CSS baseline and theme provider globally, wrap your app in the theme provider in _app.js:

jsx
// pages/_app.js
import * as React from 'react';
import { ThemeProvider, CssBaseline, createTheme } from '@mui/material';
import '../styles/globals.css';

const theme = createTheme({
palette: {
primary: {
main: '#1976d2',
},
secondary: {
main: '#dc004e',
},
},
});

function MyApp({ Component, pageProps }) {
return (
<ThemeProvider theme={theme}>
<CssBaseline />
<Component {...pageProps} />
</ThemeProvider>
);
}

export default MyApp;

This example provides:

  • A global MUI theme to your app with a primary and secondary color.
  • CssBaseline to standardize styles across browsers.

7. Result

Now, your Next.js app will be able to use both:

  • Tailwind CSS for utility-first styling.
  • Material UI for pre-built, customizable components like buttons, cards, and inputs.

Conclusion

By combining Next.js, Material-UI, and Tailwind CSS, you gain the flexibility to use utility-first styling from Tailwind while leveraging the rich, component-based architecture of Material UI. This setup gives you great power to build modern, responsive, and highly customizable applications.

×
Sign in
Sign up

Sign In

Sign Up