Install Tailwind CSS & Material UI

Tailwind CSS setup for Next.js

Modern create-next-app can enable Tailwind for you. If you start without it, install the Tailwind packages and create the config files Next expects.

After setup, add the Tailwind directives to your global stylesheet so utilities work everywhere.

Real-life example: Installing Tailwind is stocking a spice rack — once jars are labeled and on the shelf, every recipe (component) can grab salt and chili fast.

npm install tailwindcss @tailwindcss/postcss postcss

const config = {
  plugins: {
    "@tailwindcss/postcss": {},
  },
};

export default config;

@import "tailwindcss";

/* Your custom base styles below */
body {
  margin: 0;
}

Verify Tailwind works

Add a utility class on the home page. If the style appears, Tailwind is connected. If not, check the CSS import path and restart the dev server.

Real-life example: Verification is tasting the soup after adding salt — one spoon tells you if the kitchen setup worked.

export default function Page() {
  return (
    <h1 className="text-3xl font-bold underline text-sky-700">
      Tailwind is working
    </h1>
  );
}

Optional — Material UI (MUI)

Material UI is a React component library with buttons, dialogs, and themes. It is optional — many Next.js apps use Tailwind alone.

MUI components need a Client Component boundary because they use browser APIs and theme context. Install the packages, then wrap interactive UI as needed.

Real-life example: MUI is buying ready-made furniture for one room. Tailwind is painting and arranging yourself. You can use both carefully, but start with one primary system.

npm install @mui/material @emotion/react @emotion/styled

"use client";

import Button from "@mui/material/Button";

export function MuiDemo() {
  return (
    <Button variant="contained" color="primary">
      Rishtaara MUI Button
    </Button>
  );
}