# 🛠️ Upgrade TailwindCSS from v3 → v4

[festus-sulumeti]

upgrading the tailwind css

Summary:
The project was originally built using TailwindCSS v3, which is now outdated. We need to upgrade to TailwindCSS v4 to take advantage of the new features, improved performance, and better developer experience.

---

🎯 Objectives

• Upgrade the TailwindCSS dependency from v3 to v4.
• Refactor configuration files (tailwind.config.js, postcss.config.js, etc.) to align with the new structure.
• Update the design tokens (colors, spacing, typography) where breaking changes have occurred.
• Ensure all custom utilities, components, and plugins still work correctly.

---

🧩 Tasks

• Update TailwindCSS and related packages in package.json
• Adjust imports — Tailwind v4 no longer requires @tailwind base;, @tailwind components;, and @tailwind utilities; if using the new @import "tailwindcss"; syntax
• Review and migrate deprecated classes or utilities
• Verify that custom plugins and variants are compatible with v4
• Test UI components across pages to confirm styles render correctly

---