هناك مشروع كنت أعمل عليه مؤخرًا يستخدم Vite وVue وTailwind.

بعد مرور بعض الوقت من العمل باستخدام الألوان المخصصة، واجهت بعض الارتباك.

لم تكن إضافة واستخدام الألوان المخصصة في القالب هي المشكلة - فقد أصبحت العملية واضحة جدًا باستخدام وثائق Tailwind

// tailwind.config.js
module.exports = {
    theme: {
        colors: {
          'custom-green': {
              50: '#9bd1b2',
              ...
              700: '#284735'
          },
        }
    }
}

كانت مشكلتي عند استخدام الألوان المخصصة مع فئات CSS الديناميكية والثابتة في قالب Vue.

عند تشغيل المشروع باستخدام npm، قم بتشغيل dev أو vite bg-custom-green-50 أو text-custom-green-50 لم يعمل ولم يظهر أبدًا في ملفات css.

ما أفهمه هو أنه إذا كان اسم فئة CSS الكامل الخاص بك غير موجود في القالب، فلن تضيفه Tailwind أو تنشئه في ملف CSS.

بافتراض أن فئات CSS: text-custom-green-50 أو bg-custom-green-50 لا يتم استخدامها في أي مكان آخر في المشروع

المثال أدناه لن يعمل

المثال أدناه سوف يعمل

الفرق بين المثالين هو أن فئة css text-custom-green تتم إضافتها إلى القالب لذا فإن الريح الخلفية ستضيفها إلى ملف css الذي تم إنشاؤه.

للتغلب على ذلك، يمكنك إضافة أي ألوان مخصصة أو فئات خلفية إلى القائمة الآمنة داخل ملف tailwind.config.js الخاص بك.

// tailwind.config.js
module.exports = {
    safelist: [
        'text-custom-green-50',
        'bg-custom-green-50'
    ]
}

ستكون هذه الألوان متاحة حتى لو لم يتم استخدامها مباشرة في القالب، ولكن تمت إضافتها ديناميكيًا في نقطة أخرى

نأمل أن يجد شخص آخر هذا مفيدًا.