📋 محتويات الصفحة
📖 الوصف
إضافة Tailwind CSS IntelliSense هي الأداة الرسمية من Tailwind Labs لـ VS Code. توفر autocomplete للـ CSS classes، معاينة الألوان، linting، ودعم جميع أطر العمل.
🎯 يستخدم في
مجالات استخدام هذه الأداة
autocomplete لـ Tailwind classes
معاينة الألوان والأحجام
معرفة الازدواجية (Duplicates)
عرض التوثيق أثناء الكتابة
دعم Tailwind v3 و v4
تكامل مع جميع الأطر
✨ المميزات
أبرز مميزات هذه الأداة
Autocomplete ذكي للكلاسات
معاينة الألوان (Color Swatches) في الكود
linting للـ duplicate classes
عرض الـ CSS output على class
Hover Preview للـ CSS
دعم Tailwind v4 (CSS-first config)
دعم Frameworks (React
Vue
Svelte)
Multi-root workspace support
دعم Class Variance Authority (CVA)
⚠️ العيوب
نقاط يجب مراعاتها
يتطلب Tailwind مثبت في المشروع
قد لا يعمل مع setups غير قياسية
بطيء في المشاريع الكبيرة جداً
لا يدعم CSS-in-JS بالكامل
💻 مثال على الاستخدام
كيفية استخدام هذه الأداة
// .vscode/settings.json
{
"tailwindCSS.emmetCompletions": true,
"tailwindCSS.classAttributes": ["class", "className", "class:list", "classList"],
"tailwindCSS.includeLanguages": {
"html": "html",
"javascript": "javascript",
"typescript": "typescript",
"javascriptreact": "javascriptreact",
"typescriptreact": "typescriptreact"
},
"editor.quickSuggestions": {
"strings": true
}
}📚 أدوات أخرى في Extensions
قد يعجبك أيضاً
Auto Import
إضافة VS Code لإضافة الاستيرادات تلقائياً (Auto Import Extension)
Bracket Pair Colorizer
⭐إضافة VS Code لتلوين الأقواس
Color Picker
إضافة VS Code لاختيار الألوان
CSS Modules
⭐إضافة VS Code لدعم CSS Modules
Error Lens
⭐إضافة VS Code لعرض الأخطاء في السطر (Inline Diagnostics)
ESLint
⭐إضافة VS Code للتحقق من جودة الكود