توضح هذه المقالة الإجراء الكامل لإنشاء إعداد مسبق في Tailwind.
كيف يمكنك إنشاء 'إعداد مسبق' في Tailwind؟
Tailwind ' الإعدادات المسبقة 'تعتبر كائنات التكوين العادية التي تحدد نفس التكوين كما هو محدد في ملف التكوين' tailwind.config.js '. لا يتم إنشاء ملف 'الإعداد المسبق' افتراضيًا ولكن يمكن إنشاؤه باتباع الخطوات الموضحة أدناه:
الخطوة 1: قم بإنشاء ملف 'Preset'
أولاً ، قم بإنشاء ' preset.js 'في مشروع Tailwind وأضف جميع خيارات التكوين المرغوبة مثل الإضافات وتجاوزات السمات وإضافة المكونات الإضافية وغير ذلك الكثير:
// مثال على الإعداد المسبق
وحدة. صادرات = {
سمة : {
الألوان : {
أزرق : {
ضوء : '#85d7ff' و
تقصير : '# 1fb6ff' و
مظلم : '# 009 سرج' و
} و
لون القرنفل : {
ضوء : '#ff7ce5' و
تقصير : '# ff49db' و
مظلم : '# ff16d1' و
} و
رمادي : {
أحلك : '#1f2d3d' و
مظلم : '#3c4858' و
تقصير : 'في # c0cc' و
ضوء : '# e0e6ed' و
أخف : '# f9fafc' و
}
} و
خط العائلة : {
بدون : [ 'رسم بياني' و 'بلا الرقيق' ] و
} و
يضعط ' السيطرة + S. 'لحفظ الملف أعلاه.
الخطوة الثانية: قم بتحرير ملف 'tailwind.config.js'
بعد ذلك ، انتقل إلى ' Tailwind.config.js ملف التكوين '، حدد اسم مسارات القالب وكذلك حدد' preset.js 'مع' المسبقة 'الكلمة الرئيسية:
وحدة. صادرات = {
محتوى : [
'./index.html' و
'./src/**/*.{js،ts،jsx،tsx}' و
] و
المسبقة : [
( 'preset.js' )
]
}
يضعط ' السيطرة + S. 'لحفظ الملف.
الخطوة 3: قم بتشغيل التطبيق
الآن ، قم بتشغيل ' مشروع سريع 'في خادم التطوير عن طريق إدخال الأمر التالي:
npm تشغيل dev 
أخيرًا ، انقر فوق ارتباط 'المضيف المحلي' لإظهار الإخراج.
انتاج |
كما رأينا ، يُرجع الإخراج مشروع vite بتصميم 'Tailwind CSS'.
خاتمة
في Tailwind ، أنشئ ' المعد مسبقا 'في المشروع وتحديد جميع تكوينات' Tailwind.config.js ”ملف فيه. بعد ذلك ، حدد ملف 'preset.js' في ملف 'tailwind.config.js' بمساعدة الكلمة الأساسية 'Preset.js'. سيضمّن ملف 'preset.js' الذي تم إنشاؤه حديثًا جميع CSS المخصصة في القالب المحدد مثل ملف 'tailwind.config.js'. توضح هذه المقالة الإجراء الكامل لإنشاء إعداد مسبق في Tailwind.