قم بإعداد Tailwind v4 مع shadcn/ui باستخدام النمط المضمن @theme وبنية CSS المتغيرة. نمط من أربع خطوات: متغيرات CSS، ورسم خرائط Tailwind، والأنماط الأساسية، والوضع المظلم التلقائي. يمنع 8 أخطاء موثقة. يُستخدم عند تهيئة مشاريع React باستخدام Tailwind v4، أو إصلاح الألوان التي لا تعمل، أو أخطاء tw-animate-css، أو @theme المضمّن في الوضع الداكن، أو @apply Break، أو مشكلات الترحيل v3.
ثبّت مهارة الذكاء الاصطناعي tailwind-v4-shadcn بسرعة في بيئة التطوير لديك عبر سطر الأوامر
المصدر: jezweb/claude-skills.
Production-tested: WordPress Auditor (https://wordpress-auditor.webfonts.workers.dev) Last Updated: 2026-01-20 Versions: tailwindcss@4.1.18, @tailwindcss/vite@4.1.18 Status: Production Ready ✅
Critical: Define at root level (NOT inside @layer base). Use hsl() wrapper.
Why: Generates utility classes (bg-background, text-primary). Without this, utilities won't exist.
قم بإعداد Tailwind v4 مع shadcn/ui باستخدام النمط المضمن @theme وبنية CSS المتغيرة. نمط من أربع خطوات: متغيرات CSS، ورسم خرائط Tailwind، والأنماط الأساسية، والوضع المظلم التلقائي. يمنع 8 أخطاء موثقة. يُستخدم عند تهيئة مشاريع React باستخدام Tailwind v4، أو إصلاح الألوان التي لا تعمل، أو أخطاء tw-animate-css، أو @theme المضمّن في الوضع الداكن، أو @apply Break، أو مشكلات الترحيل v3. المصدر: jezweb/claude-skills.
حقول وأوامر مستقرة للاقتباس في أنظمة الذكاء الاصطناعي والبحث.
npx skills add https://github.com/jezweb/claude-skills --skill tailwind-v4-shadcnقم بإعداد Tailwind v4 مع shadcn/ui باستخدام النمط المضمن @theme وبنية CSS المتغيرة. نمط من أربع خطوات: متغيرات CSS، ورسم خرائط Tailwind، والأنماط الأساسية، والوضع المظلم التلقائي. يمنع 8 أخطاء موثقة. يُستخدم عند تهيئة مشاريع React باستخدام Tailwind v4، أو إصلاح الألوان التي لا تعمل، أو أخطاء tw-animate-css، أو @theme المضمّن في الوضع الداكن، أو @apply Break، أو مشكلات الترحيل v3. المصدر: jezweb/claude-skills.
افتح الطرفية أو أداة سطر الأوامر لديك مثل Terminal أو iTerm أو Windows Terminal انسخ ونفّذ هذا الأمر: npx skills add https://github.com/jezweb/claude-skills --skill tailwind-v4-shadcn بعد التثبيت، سيتم إعداد المهارة تلقائيا في بيئة البرمجة بالذكاء الاصطناعي لديك وتصبح جاهزة للاستخدام في Claude Code أو Cursor أو OpenClaw
https://github.com/jezweb/claude-skills