tailwind-patterns
بناء واجهات مستخدم حديثة مع Tailwind v4 باستخدام معمارية CSS-First
متاح أيضًا من: 0xDarkMatter,0xDarkMatter
توقف عن المعاناة مع إعدادات Tailwind والتصميم المتجاوب. توفر هذه المهارة أنماط CSS-first وإتقان استعلامات الحاويات (container queries) ومعمارية رموز التصميم الحديثة لبناء واجهات مستخدم قابلة للتوسع مع Tailwind CSS v4.
تنزيل ZIP المهارة
رفع في Claude
اذهب إلى Settings → Capabilities → Skills → Upload skill
فعّل وابدأ الاستخدام
اختبرها
استخدام "tailwind-patterns". إنشاء مكون بطاقة الوضع الداكن مع استعلامات الحاوية
النتيجة المتوقعة:
- .card { @container; background: white; padding: var(--spacing-lg); }
- .dark .card { background: zinc-900; }
- @sm { .card-content { grid-template-columns: 1fr 1fr; } }
استخدام "tailwind-patterns". إعداد رموز التصميم مع ألوان OKLCH
النتيجة المتوقعة:
- @theme {
- --color-primary: oklch(0.7 0.15 250);
- --color-surface: oklch(0.98 0 0);
- --spacing-md: 1rem;
- }
التدقيق الأمني
آمنStatic analysis detected 77 potential issues (backtick execution patterns, weak cryptography, system reconnaissance) but ALL are FALSE POSITIVES. The flagged patterns are markdown code block delimiters (```), inline code formatting, and CSS framework documentation comparing v3 vs v4. No executable code exists - this is documentation-only content for Tailwind CSS v4 patterns.
درجة الجودة
ماذا يمكنك بناءه
الترقية من Tailwind v3 إلى v4
المطورون الذين يترقون من Tailwind v3 إلى v4 ويحتاجون لاستبدال إعدادات JavaScript بتوجيه @theme المعتمد على CSS
بناء مكتبات مكونات متجاوبة
مهندسو واجهات المستخدم الذين ينشئون مكونات قابلة لإعادة الاستخدام تتكيف مع حجم الحاوية الخاصة بها بدلاً من نقاط توقف viewport
تنفيذ أنظمة رموز التصميم
الفرق التي تؤسس مقاييس دلالية للألوان والمسافات والطباعة باستخدام OKLCH ومتغيرات CSS
جرّب هذه الموجهات
إنشاء إعداد @theme لـ Tailwind v4 مع لون علامة تجارية أساسي ومقياس مسافات ومجموعة خطوط لـ [project type]
تصميم [component type] متجاوب باستخدام استعلامات الحاوية التي تتكيف من الحاويات الضيقة إلى الواسعة
تنفيذ الوضع الداكن لـ [page type] باستخدام استراتيجية [class/media/selector] مع رموز ألوان مناسبة
إنشاء [layout type] باستخدام [flexbox/grid] مع نقاط توقف متجاوبة وأقسام Bento غير متماثلة
أفضل الممارسات
- استخدم توجيه @theme المعتمد على CSS في Tailwind v4 بدلاً من tailwind.config.js لأداء أفضل ودعم أصلي لمتغيرات CSS
- فضّل استعلامات الحاوية (@container) للتصميم المتجاوب على مستوى المكونات بدلاً من نقاط توقف viewport للمكونات القابلة لإعادة الاستخدام والمستقلة عن السياق
- نظّم رموز التصميم في ثلاث طبقات: الألوان الأولية (قيم خام)، الرموز الدلالية (primary, surface)، ورموز المكونات (button-bg)
- استخدم نهج الهاتف المحمول أولاً بكتابة الأنماط الأساسية بدون بادئات، ثم إضافة بدائل sm: و md: و lg: للشاشات الأكبر
- استخرج المكونات عندما تتكرر مجموعات الفئات 3+ مرات أو عندما تكون هناك حاجة لمتغيرات حالة معقدة
تجنب
- تجنب القيم التعسفية في كل مكان - استخدم قيم مقياس نظام التصميم للاتساق بدلاً من الأرقام المحددة مثل w-[327px]
- لا تستخدم !important لتجاوز الأنماط - أصلح مشاكل الخصوصية من خلال بنية المكونات المناسبة وطبقات CSS
- تجنب سمات النمط المضمنة - استخدم فئات Tailwind utility للحفاظ على اتساق نظام التصميم
- لا تخلط إعدادات JavaScript v3 مع أنماط CSS-first في v4 - انتقل بالكامل إلى توجيه @theme والإعداد المعتمد على CSS
- تجنب الاستخدام المكثف لتوجيه @apply - فضّل مكونات React/Vue للسلوك الديناميكي أو مكونات CSS النقية للأنماط الثابتة