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.
Last updated
Was this helpful?