Tailwind CSS

Examples

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:

styles/globals.css
@tailwind base;
@tailwind components;
@tailwind utilities;

Özel uygulama dosyasının içinde (pages/_app.js), stilleri uygulamanızdaki her rotaya uygulamak için globals.css stil sayfasını içe aktarın.

pages/_app.tsx
// These styles apply to every route in the application
import '@/styles/globals.css'
import type { AppProps } from 'next/app'
 
export default function App({ Component, pageProps }: AppProps) {
  return <Component {...pageProps} />
}

Using Classes

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

pages/index.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.