Set up Tailwind v4 with shadcn/ui using @theme inline pattern and CSS variable architecture. Four-step pattern: CSS variables, Tailwind mapping, base styles, automatic dark mode. يمنع 8 أخطاء موثقة. يُستخدم عند تهيئة مشاريع React باستخدام Tailwind v4، أو إصلاح الألوان التي لا تعمل، أو أخطاء tw-animate-css، أو @theme المضمّن في الوضع الداكن، أو @apply Break، أو مشكلات الترحيل v3.
ثبّت مهارة الذكاء الاصطناعي tailwind-v4-shadcn بسرعة في بيئة التطوير لديك عبر سطر الأوامر
المصدر: ederheisler/agent-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.
Set up Tailwind v4 with shadcn/ui using @theme inline pattern and CSS variable architecture. Four-step pattern: CSS variables, Tailwind mapping, base styles, automatic dark mode. يمنع 8 أخطاء موثقة. يُستخدم عند تهيئة مشاريع React باستخدام Tailwind v4، أو إصلاح الألوان التي لا تعمل، أو أخطاء tw-animate-css، أو @theme المضمّن في الوضع الداكن، أو @apply Break، أو مشكلات الترحيل v3. المصدر: ederheisler/agent-skills.
حقول وأوامر مستقرة للاقتباس في أنظمة الذكاء الاصطناعي والبحث.
npx skills add https://github.com/ederheisler/agent-skills --skill tailwind-v4-shadcnSet up Tailwind v4 with shadcn/ui using @theme inline pattern and CSS variable architecture. Four-step pattern: CSS variables, Tailwind mapping, base styles, automatic dark mode. يمنع 8 أخطاء موثقة. يُستخدم عند تهيئة مشاريع React باستخدام Tailwind v4، أو إصلاح الألوان التي لا تعمل، أو أخطاء tw-animate-css، أو @theme المضمّن في الوضع الداكن، أو @apply Break، أو مشكلات الترحيل v3. المصدر: ederheisler/agent-skills.
افتح الطرفية أو أداة سطر الأوامر لديك مثل Terminal أو iTerm أو Windows Terminal انسخ ونفّذ هذا الأمر: npx skills add https://github.com/ederheisler/agent-skills --skill tailwind-v4-shadcn بعد التثبيت، سيتم إعداد المهارة تلقائيا في بيئة البرمجة بالذكاء الاصطناعي لديك وتصبح جاهزة للاستخدام في Claude Code أو Cursor أو OpenClaw
https://github.com/ederheisler/agent-skills