Tailwind CSS

PreviousCSS Modülleri (CSS Modules)NextCSS-in-JS

Last updated 1 year ago

Was this helpful?

Tailwind CSS

, Next.js ile son derece iyi çalışan bir yardımcı program öncelikli CSS çerçevesidir.

Tailwind'i Yükleme

Tailwind CSS paketlerini yükleyin ve hem tailwind.config.js hem de postcss.config.js dosyalarını oluşturmak için init komutunu çalıştırın:

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

Tailwind'i Yapılandırma

tailwind.config.js dosyasının içine Tailwind CSS sınıf adlarını kullanacak dosyaların yollarını ekleyin:

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./app/**/*.{js,ts,jsx,tsx,mdx}", // App` dizininin eklendiğine dikkat edin.
    "./pages/**/*.{js,ts,jsx,tsx,mdx}",
    "./components/**/*.{js,ts,jsx,tsx,mdx}",

    // Veya `src` dizini kullanılıyorsa:
    "./src/**/*.{js,ts,jsx,tsx,mdx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
};

postcss.config.js dosyasını değiştirmenize gerek yoktur.

Stilleri İçe Aktarma

@tailwind base;
@tailwind components;
@tailwind utilities;

Kök düzen (app/layout.tsx) içinde, stilleri uygulamanızdaki her rotaya uygulamak için globals.css stil sayfasını içe aktarın.

import type { Metadata } from "next";

// These styles apply to every route in the application
import "./globals.css";

export const metadata: Metadata = {
  title: "Create Next App",
  description: "Generated by create next app",
};

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

Sınıfları Kullanma

Tailwind CSS'yi yükledikten ve global stilleri ekledikten sonra, uygulamanızda Tailwind'in yardımcı sınıflarını kullanabilirsiniz.

app / page.tsx;

export default function Page() {
  return <h1 className="text-3xl font-bold underline">Merhaba, Next.js!</h1>;
}

Turbopack ile kullanım