Tailwind CSS

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

Installing Tailwind

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:

Terminal

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

Configuring Tailwind

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

tailwind.config.js

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    './app/**/*.{js,ts,jsx,tsx,mdx}', // Note the addition of the `app` directory.
    './pages/**/*.{js,ts,jsx,tsx,mdx}',
    './components/**/*.{js,ts,jsx,tsx,mdx}',
 
    // Or if using `src` directory:
    './src/**/*.{js,ts,jsx,tsx,mdx}',
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

postcss.config.js adresinde değişiklik yapmanıza gerek yoktur.

Importing Styles

Tailwind'in ürettiği stilleri uygulamanızdaki bir Global Stil Sayfasına enjekte etmek için kullanacağı Tailwind CSS yönergelerini ekleyin:

app/globals.css

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

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

app/layout.tsx

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>
  )
}

Using Classes

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">Hello, Next.js!</h1>
}

Usage with Turbopack

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