استخدام Tailwind CSS مع SvelteKit
ثبّت Tailwind CSS واضبطه في مشروع SvelteKit باستخدام الإضافة الرسمية.
استخدام Tailwind CSS مع SvelteKit درس مجاني في Sveltejs Academy على CoddyKit. هذا هو الدرس 1 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في Sveltejs Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة Sveltejs Academy 4 دروس في المجموع.
لماذا Tailwind
Tailwind هو إطار عمل CSS يعتمد على الأدوات، ويتكامل طبيعيًا مع الأنماط المحددة النطاق في Svelte.
التثبيت
استخدم إعداد Tailwind الرسمي الخاص بـ SvelteKit.
npx svelte-add@latest tailwindcss
npm installالإعداد
يفحص إعداد Tailwind (tailwind.config.js) ملفات Svelte بحثًا عن استخدام الأصناف.
content: ["./src/**/*.{html,js,svelte,ts}"]الاستخدام في المكونات
طبّق أصناف الأدوات مباشرةً على العناصر.
<button class="px-4 py-2 bg-blue-500 text-white rounded">Click</button>الإضافات
أضف إضافات النماذج والطباعة ونسبة العرض إلى الارتفاع للحصول على إعدادات افتراضية أغنى.
السمة المخصصة
وسّع سمة Tailwind في ملف الإعداد لإضافة ألوان العلامة التجارية والخطوط المخصصة.
الوضع الداكن
استخدم المتغير dark: مع استراتيجية الأصناف التي يتحكم بها مخزن Svelte.
التركيب
ادمج أدوات Tailwind مع كتل <style> ذات النطاق المحدد لإجراء تعديلات خاصة بالمكون.
أداء JIT
ينتج مترجم JIT في Tailwind ملفات CSS صغيرة بإدراج الأدوات التي تستخدمها فقط.
توجيه @apply
استخدم @apply داخل كتل الأنماط لإنشاء مجموعات أدوات قابلة لإعادة الاستخدام.
مكتبات واجهة المستخدم المبنية على Tailwind
توفر Skeleton UI وFlowbite Svelte وMelt UI مكونات متوافقة مع Tailwind.
تحقق سريع
ما وظيفة إعداد content في Tailwind؟
مراجعة
يشكّل Tailwind مع SvelteKit مزيجًا منتجًا. اضبط مسارات المحتوى واستخدم الأدوات مباشرةً في ترميز المكونات.
تعلم HTML مع معلم ذكاء اصطناعي — مجانًا
اكتب وقم بتشغيل أكوادك الفعلية في المتصفح، واحصل على مساعدة فورية من معلم ذكاء اصطناعي متاح 24/7، واستمر من حيث توقفت على الويب أو في التطبيق.
- الدورات
- 41
- الدروس
- 163
الأسئلة الشائعة
هل درس «استخدام Tailwind CSS مع SvelteKit» مجاني؟
نعم — نص درس «استخدام Tailwind CSS مع SvelteKit» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة Sveltejs Academy، انتقل إلى CoddyKit PRO. تتضمن دورة Sveltejs Academy 4 دروس في المجموع.
ماذا ستتعلم في «استخدام Tailwind CSS مع SvelteKit»؟
ثبّت Tailwind CSS واضبطه في مشروع SvelteKit باستخدام الإضافة الرسمية. تتمرن على Sveltejs Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.
هل أحتاج إلى خبرة سابقة لأبدأ Sveltejs Academy؟
لا تُشترط خبرة سابقة. Sveltejs Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 1 من أصل 4.
كم من الوقت يستغرق درس «استخدام Tailwind CSS مع SvelteKit»؟
معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.
هل يمكنني كتابة وتشغيل أكواد في درس Sveltejs Academy هذا؟
نعم. كل درس في Sveltejs Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.
جميع الدروس في هذه الدورة
- استخدام Tailwind CSS مع SvelteKit
- مخططات D3.js في Svelte
- خرائط Leaflet باستخدام إجراءات Svelte
- محرّرات النصوص المنسّقة: Tiptap