Tailwind CSS
Konfiguráció és testreszabás
v4 @theme, egyedi színek, spacing, breakpoint, pluginok, v3 összehasonlítás.
Konfiguráció és testreszabás
v4 CSS-first konfiguráció – @theme
A v4 legnagyobb változása: a konfiguráció CSS-ben történik, a @theme blokkban:
@import "tailwindcss";
@theme {
/* Egyedi betűtípus */
--font-sans: "Inter", "system-ui", sans-serif;
--font-display: "Cal Sans", sans-serif;
/* Egyedi színek */
--color-brand-50: oklch(0.97 0.02 250);
--color-brand-500: oklch(0.60 0.20 250);
--color-brand-900: oklch(0.25 0.10 250);
/* Egyedi spacing */
--spacing-18: 4.5rem; /* p-18, m-18, w-18, stb. */
--spacing-112: 28rem;
/* Egyedi breakpoint */
--breakpoint-3xl: 1920px;
/* Egyedi border-radius */
--radius-brand: 10px;
}Ezután a saját osztályaid automatikusan elérhetők:
<div class="font-display text-brand-500 p-18 rounded-brand">...</div>v3 összehasonlítás (ha régebbi projekttel dolgozol)
A v3-ban ugyanez a tailwind.config.js-ben volt:
// tailwind.config.js (v3 – NEM ajánlott v4-ben)
module.exports = {
content: ['./src/**/*.{js,ts,jsx,tsx}'],
theme: {
extend: {
colors: {
brand: {
50: '#eff6ff',
500: '#3b82f6',
900: '#1e3a5f',
},
},
spacing: {
'18': '4.5rem',
},
},
},
plugins: [],
}Plugin alapok
A v4-ban plugineket a CSS-ben regisztrálhatsz:
@import "tailwindcss";
@plugin "@tailwindcss/typography";
@plugin "@tailwindcss/forms";A leghasználtabb Tailwind pluginek:
@tailwindcss/typography– szép, olvasható tipográfiaproseclass-szel (blog tartalom, markdown)@tailwindcss/forms– form elemek alap stílusai
Egyedi forrás hozzáadása (automatikus content detection)
A v4 automatikusan felismeri a template fájlokat. Ha extra helyet kell hozzáadni (pl. npm csomag komponensei):
@import "tailwindcss";
@source "../node_modules/@my-company/ui-lib";Összefoglaló
A v4 konfiguráció sokkal egyszerűbb: egy CSS fájlba kerül minden. Az
@themea kulcsblokk – ide kerülnek az egyedi tokenek. A@pluginsorokkal bővíted a Tailwind-et. Ha v3-on dolgozol, atailwind.config.jstheme.extendszekciója a megfelelő hely – ez a két rendszer egymás mellé tehető, de nem keverhető.