Styling with CSS Modules and Tailwind CSS | Next.js 15

Styling Options in Next.js

Next.js supports multiple styling approaches. Pick the one that fits your project best:

1. Global CSS

/* app/globals.css */
:root {
  --color-primary: #3b82f6;
  --color-secondary: #8b5cf6;
}

body {
  font-family: "Inter", sans-serif;
  background: #f9fafb;
}

2. CSS Modules (Recommended)

Files ending in .module.css are CSS Modules. Class names are automatically scoped — no collisions ever:

/* components/Button.module.css */
.button {
  background: var(--color-primary);
  color: white;
  padding: 8px 16px;
  border-radius: 8px;
  border: none;
  cursor: pointer;
}

.button:hover { opacity: 0.9; }

import styles from "./Button.module.css";

export default function Button({ children }: { children: React.ReactNode }) {
  return <button className={styles.button}>{children}</button>;
}

3. Tailwind CSS (Rapid Development)

If you chose Tailwind during setup, it's ready to go. Build without writing CSS files:

export default function Card({ title, body }: { title: string; body: string }) {
  return (
    <div className="bg-white rounded-xl shadow-md p-6 hover:shadow-lg transition-shadow">
      <h2 className="text-xl font-semibold text-gray-900 mb-2">{title}</h2>
      <p className="text-gray-600 leading-relaxed">{body}</p>
    </div>
  );
}

Responsive Design with Tailwind

// sm: 640px+, md: 768px+, lg: 1024px+, xl: 1280px+
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
  {cards.map((card) => (
    <Card key={card.id} {...card} />
  ))}
</div>

Optimised Google Fonts

// app/layout.tsx
import { Inter } from "next/font/google";

const inter = Inter({
  subsets: ["latin"],
  variable: "--font-inter",
});

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en" className={inter.variable}>
      <body>{children}</body>
    </html>
  );
}

Önemli Noktalar

CSS Modules automatically scope class names — no collisions
Tailwind CSS enables rapid development with utility classes
next/font loads Google Fonts with zero layout shift
Tailwind breakpoint prefixes handle responsive design elegantly