Το Νοητικό Μοντέλο του Tailwind v4 & η οδηγία @theme

Το Νοητικό Μοντέλο του Tailwind v4 & η οδηγία @theme

Το Tailwind CSS v4 αντιπροσωπεύει τη μεγαλύτερη αρχιτεκτονική αναβάθμιση στην ιστορία του framework. Ο παλιός JavaScript runtime compiler αντικαταστάθηκε από έναν ταχύτατο Rust engine (βασισμένο στο Lightning CSS), ενώ το παραδοσιακό αρχείο tailwind.config.js καταργείται πλήρως υπέρ μιας CSS-first προσέγγισης.

---

1. Γιατί το v4 Καταργεί το tailwind.config.js

Στο Tailwind v3, η δήλωση χρωμάτων, γραμματοσειρών και breakpoints γινόταν μέσα σε ένα αρχείο JavaScript/TypeScript. Αυτό απαιτούσε περίπλοκο setup με PostCSS, αργό cold-start κατά το build, και δυσκολία στην κοινή χρήση μεταβλητών μεταξύ CSS και JS.

Στο Tailwind v4, το ίδιο το CSS είναι το configuration file:

• 10x ταχύτερο build time: Ο compiler διαβάζει απευθείας τα stylesheets σας.
• Μηδενικό PostCSS boilerplate: Στα περισσότερα frameworks αρκεί το επίσημο plugin (π.χ. @tailwindcss/postcss).
• Πλήρης συμβατότητα με native CSS Custom Properties.

---

2. Η Οδηγία @theme και η Δήλωση Design Tokens

Στο κεντρικό αρχείο στυλ της εφαρμογής σας (π.χ. src/app/globals.css), εισάγετε το Tailwind και ορίζετε τα tokens μέσα στο block @theme:

css
Αντιγραφή
@import "tailwindcss";

@theme {
  /* Προσαρμοσμένη παλέτα χρωμάτων */
  --color-brand-50: oklch(0.97 0.02 240);
  --color-brand-500: oklch(0.55 0.22 260);
  --color-brand-900: oklch(0.25 0.15 265);

  /* Γραμματοσειρές με αυτόματη δημιουργία utility classes */
  --font-sans: 'Geist Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'Geist Mono', ui-monospace, SFMono-Regular, monospace;

  /* Custom Spacing & Border Radius */
  --radius-card: 0.75rem;
  --spacing-container: 72rem;
}

Οτιδήποτε δηλώνεται στο @theme μετατρέπεται αυτόματα σε utility classes:

• Η μεταβλητή --color-brand-500 παράγει άμεσα τα classes: bg-brand-500, text-brand-500, border-brand-500, ring-brand-500.
• Η μεταβλητή --radius-card παράγει το utility rounded-card.

---

3. Προσαρμοσμένα Utilities με την Οδηγία @utility

Ξεχάστε το plugin(({ addUtilities }) => ...). Στο v4, η προσθήκη νέων atomic utility classes γίνεται με native CSS σύνταξη:

css
Αντιγραφή
@utility content-auto {
  content-visibility: auto;
  contain-intrinsic-size: 0 500px;
}

@utility scrollbar-none {
  scrollbar-width: none;
  &::-webkit-scrollbar {
    display: none;
  }
}

Τώρα μπορείτε να χρησιμοποιήσετε <div className="content-auto scrollbar-none"> όπως κάθε ενσωματωμένο class του Tailwind.

---

4. Dark Mode & Custom Variant Selectors

Στο v4, η ρύθμιση του dark mode δεν απαιτεί darkMode: 'class' σε JavaScript config. Ορίζετε έναν κανόνα @custom-variant:

css
Αντιγραφή
/* Ενεργοποίηση dark variant όταν υπάρχει το .dark class σε οποιονδήποτε γονέα */
@custom-variant dark (&:where(.dark, .dark *));

Αυτό σας δίνει απόλυτο έλεγχο στο πώς εφαρμόζεται το dark: πρόθεμα, είτε μέσω class στο <html> είτε μέσω media query (prefers-color-scheme).

---

5. Συγκριτικός Πίνακας v3 vs v4