Tailwind CSS v4 — كل ما تغيّر وكيف تهاجر

// tailwind.config.js
module.exports = {
  content: ["./src/**/*.{ts,tsx}"],
  darkMode: "class",
  theme: {
    extend: {
      colors: {
        brand: "#6366f1",
      },
      fontFamily: {
        sans: ["Cairo", "sans-serif"],
      },
    },
  },
};

/* globals.css */
@import "tailwindcss";
 
@theme {
  --font-sans: "Cairo", sans-serif;
  --color-brand: #6366f1;
  --color-brand-hover: #4f46e5;
  --radius-card: 1rem;
}

/* v3: ضُبط في tailwind.config.js */
 
/* v4: ضعها في CSS */
@variant dark (&:is(.dark, .dark *));

.card {
  /* بدلًا من Tailwind class يمكن استخدامها مباشرة */
  border-radius: var(--radius-lg);
  color: var(--color-gray-900);
  background: var(--color-white);
}

<!-- v4: تستطيع استخدام arbitrary variants مباشرة -->
<div class="[&:nth-child(3)]:bg-blue-100">...</div>
 
<!-- نمط الـ group و peer لم يتغيّر -->
<div class="group hover:bg-gray-100">
  <span class="group-hover:text-blue-600">نص</span>
</div>

npm install tailwindcss@next @tailwindcss/vite
# أو مع Next.js
npm install tailwindcss@next @tailwindcss/postcss

// قبل
module.exports = { plugins: { tailwindcss: {}, autoprefixer: {} } };
 
// بعد
module.exports = { plugins: { "@tailwindcss/postcss": {} } };

/* قبل */
@tailwind base;
@tailwind components;
@tailwind utilities;
 
/* بعد */
@import "tailwindcss";

/* انقل من tailwind.config.js إلى CSS */
@theme {
  --font-sans: "Cairo", sans-serif;
  --font-mono: "JetBrains Mono", monospace;
 
  --color-primary:   #6366f1;
  --color-primary-hover: #4f46e5;
}