CSS Modules ve Tailwind CSS ile Stil | Next.js 15

Next.js\'te Stillendirme Seçenekleri

Next.js, birden fazla stillendirme yöntemi destekler. Projenize uygun olanı seçin:

1. Global CSS

/* app/globals.css */
:root {
  --renk-birincil: #3b82f6;
  --renk-ikincil: #8b5cf6;
}

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

/* app/layout.tsx içinde import edilir */
import "./globals.css";

2. CSS Modules (Tavsiye Edilir)

Dosya adı .module.css ile biten dosyalar CSS Modules olur. Sınıf isimleri otomatik olarak benzersiz hale getirilir — çakışma olmaz:

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

.buton:hover {
  opacity: 0.9;
}

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

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

3. Tailwind CSS (Hızlı Geliştirme)

Create-next-app ile kurduysanız Tailwind hazır gelir. Utility-first yaklaşımıyla CSS dosyası yazmadan stillendirme yaparsınız:

export default function Kart({ baslik, icerik }: { baslik: string; icerik: 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">{baslik}</h2>
      <p className="text-gray-600 leading-relaxed">{icerik}</p>
    </div>
  );
}

Responsive Tasarım (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">
  {kartlar.map((kart) => (
    <Kart key={kart.id} {...kart} />
  ))}
</div>

Dark Mode

// tailwind.config.ts
export default {
  darkMode: "class", // veya "media"
  // ...
}

// Kullanım
<div className="bg-white dark:bg-gray-900 text-black dark:text-white">
  İçerik
</div>

Google Fonts Optimizasyonu

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

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

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

Önemli Noktalar

CSS Modules sınıf adlarını otomatik benzersiz yapar — çakışma olmaz
Tailwind CSS utility-first yaklaşımla hızlı stillendirme sağlar
next/font ile Google Fonts optimize şekilde yüklenir
Responsive tasarım için Tailwind'in breakpoint prefix'lerini kullanın