एक प्रोजेक्ट जिस पर मैं हाल ही में काम कर रहा हूं वह वाइट, व्यू और टेलविंड का उपयोग करता है।

कुछ समय तक कस्टम रंगों के साथ काम करने के बाद, मुझे कुछ भ्रम का सामना करना पड़ा।

टेम्पलेट में कस्टम रंग जोड़ना और उपयोग करना, कोई समस्या नहीं थी - टेलविंड दस्तावेज़ीकरण का उपयोग करके प्रक्रिया को बहुत स्पष्ट किया गया है

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

मेरी समस्या Vue टेम्पलेट में गतिशील और स्थिर सीएसएस कक्षाओं के साथ कस्टम रंगों का उपयोग करते समय थी।

प्रोजेक्ट को npm run dev या vite के साथ चलाने पर bg-custom-green-50 या text-custom-green-50 काम नहीं करता था और कभी भी CSS फ़ाइलों में दिखाई नहीं देता था।

मेरी समझ यह है कि यदि आपका पूरा सीएसएस क्लास नाम टेम्पलेट में मौजूद नहीं है तो टेलविंड इसे सीएसएस फ़ाइल में नहीं जोड़ेगा या उत्पन्न नहीं करेगा।

सीएसएस वर्गों को मानते हुए: टेक्स्ट-कस्टम-ग्रीन-50 या बीजी-कस्टम-ग्रीन-50 का उपयोग परियोजना में कहीं और नहीं किया जाता है

नीचे दिया गया उदाहरण काम नहीं करेगा

नीचे दिया गया उदाहरण काम करेगा

दो उदाहरणों के बीच अंतर यह है कि टेक्स्ट-कस्टम-ग्रीन सीएसएस क्लास को टेम्पलेट में जोड़ा गया है, इसलिए टेलविंड इसे जेनरेट की गई सीएसएस फ़ाइल में जोड़ देगा।

इस पर काबू पाने के लिए आप अपनी टेलविंड.कॉन्फिग.जेएस फ़ाइल के भीतर एक सुरक्षित सूची में कोई भी कस्टम रंग या टेलविंड क्लास जोड़ सकते हैं।

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

ये रंग उपलब्ध होंगे, भले ही इन्हें सीधे टेम्पलेट में उपयोग न किया गया हो, लेकिन किसी अन्य बिंदु पर गतिशील रूप से जोड़ा गया हो

उम्मीद है कि किसी और को यह मददगार लगेगा।