Tailwind CSS

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'in oluşturduğu stilleri uygulamanızdaki bir Global Stil Sayfasına enjekte etmek için kullanacağı Tailwind CSS yönergelerini ekleyin:

@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

Next.js 13.1'den itibaren Tailwind CSS ve PostCSS, Turbopack ile desteklenmektedir.

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

Last updated 2 years ago

Was this helpful?