سوف تشرح هذه المقالة:
- ما الذي تفعله الشاشات والألوان والتباعد في سمة Tailwind؟
- كيفية استخدام الشاشات والألوان والتباعد في سمة Tailwind؟
- كيفية تكوين الشاشات والألوان والتباعد في سمة Tailwind؟
ما الذي تفعله الشاشات والألوان والتباعد في سمة Tailwind؟
ال شاشات يسمح المفتاح للمستخدمين بتعديل نقاط التوقف سريعة الاستجابة في مشروع Tailwind. نقاط التوقف هي النقاط التي يتغير فيها التخطيط بناءً على عرض الشاشة. بشكل افتراضي ، تتضمن Tailwind خمس شاشات ، أي sm (صغير) و md (متوسط) و lg (كبير) و xl (كبير جدًا). ومع ذلك ، يمكن للمستخدمين تحديد نقاط التوقف الخاصة بهم باستخدام مفتاح 'الشاشات' ، ثم استخدامها في برنامج HTML.
الألوان مفتاح يستخدم لتعديل لوحة الألوان. تعتبر الألوان من أهم سمات التصميم. توفر سمة Tailwind لوحة ألوان افتراضية مع مجموعة واسعة من الظلال ، ولكن يمكن للمستخدمين أيضًا تخصيصها أو تمديدها بألوانهم. يمكن للمستخدمين تحديد الألوان باستخدام مفتاح 'الألوان' ، ثم استخدامها مع أي فئة أدوات مساعدة متعلقة بالألوان في كود HTML.
ال تباعد يتم استخدام المفتاح لتعديل مقياس التباعد والتحجيم. يعد التباعد جانبًا أساسيًا آخر من جوانب التصميم ، حيث يؤثر على قابلية القراءة والمحاذاة وتوازن العناصر. توفر سمة Tailwind مقياس تباعد ثابتًا استنادًا إلى قيمة أساسية تبلغ 4 بكسل (0.25 ريم). ومع ذلك ، يمكن أيضًا تخصيصها أو توسيعها بقيم مخصصة. يمكن للمستخدمين تحديد قيم التباعد باستخدام مفتاح 'التباعد' ، ثم استخدامها مع أي فئة أدوات مساعدة متعلقة بالتباعد في ملف البرنامج.
كيفية استخدام الشاشات والألوان والتباعد في سمة Tailwind؟
لاستخدام الشاشات والألوان والتباعد في نسق Tailwind ، أنشئ برنامج HTML واستخدم الشاشة الافتراضية والألوان وخصائص التباعد كما هو مطلوب. بعد ذلك ، قم بتشغيل برنامج HTML واعرض صفحة الويب بتنسيق HTML. دعونا نتبع الخطوات المذكورة أدناه:
الخطوة 1: إنشاء صفحة ويب HTML
أولاً ، قم بإنشاء برنامج HTML واستخدم خصائص الشاشة والألوان والتباعد الافتراضية:
<الجسم ><فئة div = 'h-screen p-10 sm: bg-red-700 md: bg-blue-600 lg: bg-green-500 xl: bg-pink-700' >
= 'text-3xl m-5 sm: text-white text-center' >
تلميح لينكس!
>
<فئة h2 = 'text-2xl m-5 md: text-white text-center' >
مرحبًا بك في هذا البرنامج التعليمي
>
= 'text-2xl m-5 lg: text-white text-center' >
Tailwind CSS
>
<ف الطبقة = 'text-2xl m-5 xl: text-white text-center' >
ثيمات
>
>
>
Tailwind CSS
>
<ف الطبقة = 'text-2xl m-5 xl: text-white text-center' >
ثيمات
>
>
>
هنا:
- ' -p-10 ' و ' م -5 'هي خاصية التباعد.
- ' سم '،' م '،' إل جي '، و ' xl 'هي خصائص الشاشة.
- ' الأحمر 700 '،' الأزرق 600 '،' الأخضر 500 '،' الوردي 700 '، و ' أبيض 'هي خصائص اللون.
الخطوة 2: قم بتشغيل برنامج HTML
بعد ذلك ، قم بتشغيل برنامج HTML لعرض صفحة ويب HTML:
في الإخراج أعلاه ، يمكن رؤية الشاشات والألوان وخصائص التباعد الافتراضية.
كيفية تكوين الشاشات والألوان والتباعد في سمة Tailwind؟
لتهيئة الشاشات والألوان والتباعد في سمة Tailwind ، ألق نظرة على الخطوات المقدمة:
- افتح ال ' Tailwind.config.js ' ملف.
- انتقل إلى ' سمة 'وتخصيص الشاشات والألوان وخصائص التباعد كما هو مطلوب.
- استخدم الخصائص المخصصة في برنامج HTML.
- اعرض صفحة الويب بتنسيق HTML للتحقق منها.
الخطوة 1: تكوين الشاشات والألوان والتباعد في ملف تهيئة Tailwind
في ال ' سمة 'قسم' Tailwind.config.js 'ملف ، تخصيص الشاشات والألوان وخصائص التباعد حسب الحاجة. على سبيل المثال ، قمنا بتخصيص هذه الخصائص على النحو التالي:
وحدة .صادرات = {محتوى : [ './index.html' ] و
سمة : {
// تخصيص الشاشات
شاشات : {
سم : '480 بكسل' و
م : '668 بكسل' و
إل جي : '876px' و
xl : '1100 بكسل' و
} و
// تخصيص الألوان
الألوان : {
أبيض : #ffffff و
أسود : '# 000000' و
أزرق : '# 08609c' و
أخضر : '# 089c28' و
أحمر : '# 9c0306' و
أصفر : '# ede60e' و
لون القرنفل : '# ed0e55' و
} و
// تخصيص التباعد
تباعد : {
مقصف : '1 بكسل' و
'0' : '0' و
'1' : '0.25rem' و
'2' : '0.5rem' و
'3' : '0.75rem' و
'4' : 'الشيء 1' و
'5' : '1.25rem' و
'6' : '1.5rem' و
'8' : '2rem' و
'10' : '2.5rem' و
'12' : '3rem' و
'16' : '4rem' و
'عشرين' : '5rem' و
}
} و
} ؛
في هذا الكود:
- ال ' شاشات 'تحدد خاصية' نقاط توقف الشاشة 'لأحجام متنوعة. يوفر أسماء مستعارة (مثل sm و md و lg و xl) والقيم المكافئة لها.
- ال ' الألوان 'تحدد الخاصية ألوانًا مخصصة باستخدام اسمها وأزواج القيمة السداسية العشرية.
- ال ' تباعد تحدد خاصية 'قيم التباعد المخصصة للعديد من الأحجام. يستخدم الأسماء المستعارة (مثل px ، 0 ، 1 ، 2 ، إلخ) لتمثيل قيم تباعد محددة في وحدات 'rem'.
الخطوة 2: استخدم الخصائص المكونة في برنامج HTML
الآن ، استخدم الخصائص المخصصة في برنامج HTML:
<الجسم ><فئة div = 'h-screen p-10 sm: bg-red md: bg-blue lg: bg-green xl: bg-pink' >
= 'text-3xl m-5 sm: text-white text-center' >
تلميح لينكس!
>
<فئة h2 = 'text-2xl m-5 md: text-white text-center' >
مرحبًا بك في هذا البرنامج التعليمي
>
= 'text-2xl m-5 lg: text-white text-center' >
Tailwind CSS
>
<ف الطبقة = 'text-2xl m-5 xl: text-white text-center' >
ثيمات
>
>
>
الخطوة 3: عرض صفحة ويب HTML
Tailwind CSS
>
<ف الطبقة = 'text-2xl m-5 xl: text-white text-center' >
ثيمات
>
>
>
الخطوة 3: عرض صفحة ويب HTML
أخيرًا ، تحقق من الإخراج من خلال عرض صفحة الويب بتنسيق HTML:
يمكن ملاحظة أن محتوى صفحة الويب يتغير وفقًا للشاشات المكونة والألوان وخصائص التباعد.
خاتمة
ال شاشات يسمح key للمستخدمين بتخصيص / تعديل نقاط التوقف المستجيبة ، و الألوان يتم استخدام المفتاح لتخصيص لوحة الألوان للمشروع و تباعد يتم استخدام المفتاح لتخصيص مقياس التباعد والحجم. علاوة على ذلك ، يمكن للمستخدمين تخصيص هذه المفاتيح أو الخصائص وفقًا لاحتياجاتهم. توضح هذه المقالة الشاشات والألوان والتباعد في نسق Tailwind.