tailwindcss forms

@tailwindcss/forms

مكون إضافي يوفر إعادة تعيين أساسية لأنماط النماذج مما يجعل من السهل تجاوز عناصر النموذج باستخدام الأدوات المساعدة.

تثبيت

قم بتثبيت البرنامج المساعد من npm:

 تثبيت npm -D @tailwindcss/forms

ثم أضف المكوّن الإضافي إلى ملف tailwind.config.js الخاص بك:

 // tailwind.config.jsmodule.exports = {
  سمة: {// ...
  },
  المكونات الإضافية: [تتطلب ('@tailwindcss/forms')،// ...
  ]،}

الاستخدام الأساسي

شاهد العرض التجريبي المباشر

ستحتوي جميع عناصر النموذج الأساسية التي تستخدمها الآن على بعض الأنماط الافتراضية البسيطة التي يسهل تجاوزها باستخدام الأدوات المساعدة.

نقوم حاليًا بإضافة أنماط نماذج أساسية سهلة الاستخدام لأنواع عناصر النموذج التالية:

• input[type='text']

• input[type='password']

• input[type='email']

• input[type='number']

• input[type='url']

• input[type='date']

• input[type='datetime-local']

• input[type='month']

• input[type='week']

• input[type='time']

• input[type='search']

• input[type='tel']

• input[type='checkbox']

• input[type='radio']

• select

• select[multiple]

• textarea

تمت تسوية/إعادة تعيين كل عنصر إلى نمط بسيط متسق بصريًا يسهل تخصيصه باستخدام الأدوات المساعدة، حتى العناصر مثل <select> أو <input type="checkbox"> التي تحتاج عادةً إلى إعادة تعيينها مع appearance: none وتخصيصها باستخدام مخصص CSS:

 <!-- يمكنك بالفعل تخصيص المساحة المتروكة على عنصر التحديد الآن: --><select class="rounded-full px-4 py-3">
  <!-- ... --></select><!-- أو قم بتغيير لون مربع الاختيار باستخدام الأدوات المساعدة لتلوين النص: --><input type="checkbox" class="rounded text-pink-500" />

المزيد من أمثلة التخصيص وأفضل الممارسات قريبًا.

استخدام الفصول في الأسلوب

بالإضافة إلى الأنماط العامة، نقوم أيضًا بإنشاء مجموعة من الفئات المقابلة والتي يمكن استخدامها لتطبيق أنماط النموذج بشكل صريح على عنصر ما. يمكن أن يكون هذا مفيدًا في المواقف التي تحتاج فيها إلى جعل عنصر غير نموذجي، مثل <div> ، يبدو كعنصر نموذج.

 <input type="email" class="form-input rounded-full px-4 py-3" /><select class="form-select rounded-full px-4 py-3">
  <!-- ... --></select><input type="checkbox" class="form-checkbox rounded text-pink-500" />

فيما يلي جدول كامل لفئات form-* المقدمة للرجوع إليها:

قاعدة	فصل
[type='text']	form-input
[type='email']	form-input
[type='url']	form-input
[type='password']	form-input
[type='number']	form-input
[type='date']	form-input
[type='datetime-local']	form-input
[type='month']	form-input
[type='search']	form-input
[type='tel']	form-input
[type='time']	form-input
[type='week']	form-input
textarea	form-textarea
select	form-select
select[multiple]	form-multiselect
[type='checkbox']	form-checkbox
[type='radio']	form-radio

استخدام الأنماط العالمية فقط أو الفئات فقط

على الرغم من أننا نوصي بالتفكير في هذا المكون الإضافي باعتباره "إعادة ضبط النموذج" بدلاً من مجموعة من أنماط مكونات النموذج، إلا أنه في بعض الحالات قد يكون أسلوبنا الافتراضي ثقيلًا جدًا، خاصة عند دمج هذا المكون الإضافي في المشاريع الحالية.

إذا كان إنشاء الأنماط والفئات العامة (الأساسية) لا يعمل بشكل جيد مع مشروعك، فيمكنك استخدام خيار strategy لقصر المكون الإضافي على واحد فقط من هذه الأساليب.

 // tailwind.config.jsplugins: [
  تتطلب ("@tailwindcss/forms")({استراتيجية: 'base'، // إنشاء استراتيجية الأنماط العالمية فقط: 'class'، // إنشاء الفئات فقط
  })،]،

عند استخدام الإستراتيجية base ، يتم تصميم عناصر النموذج عالميًا، ولا يتم إنشاء فئات form-{name} .

عند استخدام إستراتيجية class ، لا يتم تصميم عناصر النموذج بشكل عام، وبدلاً من ذلك يجب تصميمها باستخدام فئات form-{name} التي تم إنشاؤها.