# Tailwind CSS [Tailwind CSS](https://tailwindcss.com/), 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: ```terminal 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: ```js /** @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](https://tailwindcss.com/docs/functions-and-directives#directives) ekleyin: ```css @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. ```js 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 ( {children} ); } ``` ## 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. ```tsx app / page.tsx; export default function Page() { return

Merhaba, Next.js!

; } ``` ## Turbopack ile kullanım Next.js 13.1'den itibaren Tailwind CSS ve PostCSS, [Turbopack](https://turbo.build/pack/docs/features/css#tailwind-css) ile desteklenmektedir.