Alapok – Telepítés és konfiguráció

Alapok – Telepítés és konfiguráció

A v4-es Tailwind és a CSS-first konfiguráció

A Tailwind v4 (2025. január) egy teljesen újraírt verzió. A legfontosabb változás: nincs többé tailwind.config.js alapbeállításhoz. Ehelyett közvetlenül a CSS fájlban konfigurálod a Tailwind-et.

⚠️ Figyelem: Ha régebbi projekteken dolgozol, azok még v3-at használhatnak tailwind.config.js-sel. Ez az útmutató a modern v4-et mutatja be, de jelzi, hol különbözik a v3-tól.

Telepítés – Vite projekt esetén

npm install tailwindcss @tailwindcss/vite

vite.config.ts / vite.config.js:

import { defineConfig } from 'vite'
import tailwindcss from '@tailwindcss/vite'

export default defineConfig({
  plugins: [
    tailwindcss(),
  ],
})

src/index.css (vagy a főbb CSS fájlod):

@import "tailwindcss";

Ez az egész! Nincs PostCSS konfig, nincs content array – a v4 automatikusan megtalálja a template fájlokat.

Telepítés – Next.js projekt esetén

npx create-next-app@latest my-app --typescript --eslint --app --tailwind

A create-next-app automatikusan beállítja a Tailwind v4-et. Ha meglévő projekthez adod hozzá:

npm install tailwindcss @tailwindcss/postcss postcss

postcss.config.mjs:

const config = {
  plugins: {
    "@tailwindcss/postcss": {},
  },
};
export default config;

app/globals.css:

@import "tailwindcss";

Konfiguráció – a v4-es @theme direktíva

A v4-ban a konfigurációt közvetlenül a CSS-ben végzed, a @theme blokkon belül:

@import "tailwindcss";

@theme {
  --font-sans: "Inter", sans-serif;
  --color-brand: oklch(0.60 0.20 250);
  --breakpoint-3xl: 1920px;
  --spacing-18: 4.5rem;
}

v3 különbség: v3-ban ez a tailwind.config.js theme.extend szekciójában volt. Ha v3-as projekten dolgozol, az a minta is érvényes.

Hogyan működnek az utility class-ek?

A Tailwind utility class-ek egy nagyon egyszerű mintát követnek:

[property]-[value]

Néhány példa:

• text-lg → font-size: 1.125rem
• p-4 → padding: 1rem (16px)
• bg-blue-500 → kék háttérszín
• flex → display: flex

A v4-ben dinamikus értékek is elérhetők zárójelek nélkül:

<!-- v4: egyszerűbb szintaxis -->
<div class="w-100 h-50 grid-cols-15">...</div>

<!-- v3: szögletes zárójelek kellettek -->
<div class="w-[100px] h-[50px] grid-cols-[15]">...</div>

Ha teljesen egyedi értéket kell megadni (ami nincs a skálán), v4-ben is használhatod az arbitrary values szintaxist:

<div class="w-[347px] top-[117px]">...</div>

Összefoglaló

A Tailwind v4 telepítése egyszerűbb, mint valaha – egyetlen import sor elég a CSS-ben. A konfiguráció a @theme blokkban történik. A lényeg: a Tailwind nem helyettesíti a CSS tudást, hanem gyorsabbá teszi a használatát.