Μετάβαση από Tailwind CSS v3 σε v4: Ο Πλήρης Οδηγός

Μετάβαση από Tailwind CSS v3 σε v4: Ο Πλήρης Οδηγός

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

Αυτός ο οδηγός σας καθοδηγεί βήμα προς βήμα στην ασφαλή αναβάθμιση ενός υφιστάμενου project από v3 σε v4, ελαχιστοποιώντας τα regressions στο UI.

---

Βήμα 1: Αυτοματοποιημένη Αναβάθμιση με το Official Upgrade Tool

Η ομάδα του Tailwind δημιούργησε ένα επίσημο εργαλείο codemod που αναλύει τον κώδικά σας και μετατρέπει αυτόματα τις παλιές ρυθμίσεις σε modern CSS:

bash
Αντιγραφή
# Εκτέλεση του automated upgrade codemod
npx @tailwindcss/upgrade@next

Το εργαλείο:

1. Ενημερώνει τα package.json dependencies (tailwindcss, @tailwindcss/postcss).
2. Μεταφέρει τα tokens από το tailwind.config.js στην οδηγία @theme μέσα στο κύριο CSS αρχείο σας.
3. Αντικαθιστά παρωχημένα utilities (π.χ. bg-opacity-* σε slash opacity bg-black/50).

---

Βήμα 2: Χειροκίνητη Διαμόρφωση globals.css

Στο Tailwind v3 είχατε τρεις ξεχωριστές οδηγίες (@tailwind base;, @tailwind components;, @tailwind utilities;). Στο v4, όλες αντικαθίστανται από μία μόνο γραμμή:

css
Αντιγραφή
/* src/app/globals.css */
@import "tailwindcss";

@theme {
  /* Αντιστοίχιση των παλιών JS theme overrides */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'JetBrains Mono', monospace;

  /* Custom Brand Colors με σύγχρονο OKLCH gamut */
  --color-brand-primary: oklch(0.55 0.22 260);
  --color-brand-secondary: oklch(0.70 0.15 160);

  /* Breakpoints και Spacing */
  --breakpoint-3xl: 120rem;
  --radius-card: 0.75rem;
}

/* Custom Variant για Dark Mode βασισμένο σε class */
@custom-variant dark (&:where(.dark, .dark *));

---

Βήμα 3: Ενημέρωση του PostCSS Setup

Εάν το project σας χρησιμοποιεί Next.js ή Vite με PostCSS, απλοποιήστε το postcss.config.mjs:

javascript
Αντιγραφή
// postcss.config.mjs
export default {
  plugins: {
    '@tailwindcss/postcss': {},
  },
}

[!NOTE] Το παλιό autoprefixer δεν απαιτείται πλέον, καθώς το Lightning CSS χειρίζεται αυτόματα όλα τα vendor prefixes (webkit, moz) κατά τη μεταγλώττιση!

---

Βήμα 4: Διαγραφή Legacy Αρχείων Ρύθμισης

Μπορείτε πλέον να διαγράψετε με ασφάλεια:

bash
Αντιγραφή
rm tailwind.config.js tailwind.config.ts

Όλες οι ρυθμίσεις ζουν πλέον στο globals.css, προσφέροντας hot-reload σε λιγότερο από 15ms και πλήρη έλεγχο μέσω native CSS Custom Properties.

---

Βήμα 5: Κρίσιμες Αλλαγές & Breaking Changes (Gotchas)