جاري التحميل...
جاري التحميل...
Tailwind v4، @import، @theme، إعداد المشروع
في هذا الدرس، سنتعلم كيفية إعداد Tailwind CSS v4 مع مشروع Next.js. أصبح الإعداد في v4 أسهل وأبسط بكثير مقارنة بالإصدارات السابقة.
💡 ماذا تغير في Tailwind v4؟:
لم يعد هناك ملف tailwind.config.js — الإعداد الآن مباشرة عبر CSS. يستخدم التوجيه @theme للتخصيص. سرعة بناء أسرع بشكل ملحوظ مع مخرجات أصغر. مسح ملفات تلقائي بدون تحديد مسارات.
يخبر ملف postcss.config.mjs Next.js كيفية معالجة ملفات CSS. ملف globals.css هو نقطة الدخول لـ Tailwind CSS. سطر @import "tailwindcss" يستورد جميع الأنماط الأساسية ويسحب ملفات المشروع ويولّد CSS للفئات المكتشفة.
💡 لا تستخدم توجيهات v3 القديمة!:
في Tailwind v4، لا تستخدم @tailwind base أو @tailwind components أو @tailwind utilities. استبدلها جميعاً بسطر واحد: @import "tailwindcss".
لنشئ مكوننا الأول باستخدام Tailwind CSS ونرى كيف يعمل عملياً. أنشئ مكون SimpleCard وأضفه إلى صفحتك الرئيسية.
أي ملف يجب إضافته إلى جذر المشروع لإعداد PostCSS مع Tailwind v4؟
في Tailwind v4، ماذا نستخدم في globals.css بدلاً من @tailwind base/components/utilities؟
هل نحتاج إلى تحديد مسارات مسح الملفات في v4؟
ما هو الحجم النهائي المتوقع لـ CSS في مشروع Tailwind متوسط في الإنتاج؟
اتبع هذه الخطوات: أنشئ مشروع Next.js جديدًا، ثبّت Tailwind CSS v4 و @tailwindcss/postcss، أنشئ post.css.config.mjs، عدّل globals.css، أنشئ مكون UserCard مع دعم الوضع الداكن، وتحقق من أن التصميم يظهر بشكل صحيح.
الحل:
export default function UserCard() {
return (
<div className="mx-auto max-w-sm rounded-2xl bg-white p-6 shadow-xl dark:bg-gray-800">
<div className="mb-4 flex items-center gap-4">
<div className="flex h-14 w-14 items-center justify-center rounded-full bg-gradient-to-br from-cyan-400 to-blue-500 text-xl font-bold text-white">
Ahmed
</div>
<div>
<h3 className="text-lg font-bold text-gray-900 dark:text-white">Ahmed</h3>
<p className="text-sm text-gray-500 dark:text-gray-400">Frontend Developer</p>
</div>
</div>
<p className="mb-4 text-gray-600 dark:text-gray-300">
A passionate developer learning the latest web technologies.
</p>
<button className="w-full rounded-xl bg-cyan-500 px-4 py-2.5 font-medium text-white transition-all hover:bg-cyan-600 hover:shadow-lg active:scale-[0.98]">
Follow
</button>
</div>
);
}أنشئ مشروع Next.js جديد مع إعداد Tailwind v4 من الصفر.
💡 اتبع الدليل خطوة بخطوة أعلاه.
1. التثبيت:
npm install tailwindcss @tailwindcss/postcss2. postcss.config.mjs:
const config = {
plugins: {
"@tailwindcss/postcss": {},
},
};
export default config;3. globals.css:
@import "tailwindcss";4. VS Code:
كيف تنشئ تصميم responsive بـ Tailwind؟
الإجابة:
استخدم breakpoint prefixes: sm: md: lg: xl:
استخدم @apply
لا تُكثر من @apply. استخدمه فقط للفئات المتكررة جداً.