الواجهات والتصميم

Tailwind CSS IntelliSense

إكمال تلقائي ذكي لأصناف Tailwind مع معاينة الألوان والقيم أثناء الكتابة.

Claude Code Copilot Cursor Windsurf

نظرة عامة

Tailwind CSS IntelliSense يوفر لوكيل البرمجة معرفة عميقة بأصناف Tailwind CSS المتاحة في المشروع، بما في ذلك الأصناف المخصصة والثيمات. يمكن للوكيل اقتراح الأصناف الصحيحة وتحسين الأنماط الموجودة.

يستطيع الوكيل كتابة أصناف Tailwind صحيحة تماماً مع مراعاة التكوين المخصص للمشروع، اقتراح بدائل أفضل للأنماط الحالية، وتحويل CSS عادي إلى Tailwind classes. كما يفهم الوكيل نظام الطبقات والاستجابة في Tailwind.

ضرورية لأي مشروع يستخدم Tailwind CSS لضمان استخدام صحيح ومتسق للأصناف عبر المشروع.

لمن هذه الأداة؟

مطوري Frontend الذين يستخدمون Tailwind CSS يومياً
فرق التطوير التي تريد تنسيق استخدام Tailwind
مطورين يحولون تصاميم إلى كود Tailwind
مطورين يحسنون أداء CSS بتقليل الأصناف المكررة

التثبيت

إعداد Claude Code

npm install -D tailwindcss @tailwindcss/vite

الإعدادات

/* src/styles/global.css */
@import "tailwindcss";

@theme {
  --color-primary: #6366f1;
  --color-surface: #1e1e2e;
  --font-family-sans: "Inter", sans-serif;
}

زيارة المصدر (الموقع الرسمي)

مهارات مشابهة

الواجهات والتصميم

Figma MCP

تحويل تصاميم Figma إلى كود مباشرة مع الحفاظ على الأنماط والمكونات.

Claude Code Cursor Windsurf

الواجهات والتصميم

توثيق المكونات مع Storybook

إنشاء توثيق تفاعلي لمكونات الواجهة مع أمثلة حية وحالات استخدام.

Claude Code Copilot Cursor

الواجهات والتصميم

فحص إمكانية الوصول (axe-core)

فحص تلقائي لمشاكل إمكانية الوصول وتقديم اقتراحات لتحسين تجربة جميع المستخدمين.

Claude Code Copilot Cursor