Tailwind शैडो जनरेटर
विज़ुअली एक लेयर्ड शैडो बनाएं, Tailwind shadow-[...] आर्बिट्ररी-वैल्यू
क्लास और रॉ CSS पाएं.
यह कैसे काम करता है
हर लेयर का offset-x, offset-y, blur, spread, रंग, और inset टॉगल मिलकर एक
box-shadow सेगमेंट बनाता है, और कई लेयर कॉमा से जोड़ी जाती हैं, यह स्टैंडर्ड
CSS मल्टी-शैडो सिंटैक्स है. Tailwind क्लास के लिए, उसी वैल्यू के स्पेस को अंडरस्कोर से
बदला जाता है और कॉमा वैसे ही रहते हैं (Tailwind का आर्बिट्ररी-वैल्यू पार्सर
shadow-[0_4px_6px_rgba(0,0,0,0.1)] जैसी स्टाइल चाहता है), फिर इसे
shadow-[...] में रैप किया जाता है. प्रीव्यू बॉक्स की असली
box-shadow स्टाइल रॉ CSS वर्ज़न पर सेट होती है, इसलिए जो आप देखते हैं वह दोनों
आउटपुट से बिल्कुल मेल खाता है.
सब कुछ इस पेज के जावास्क्रिप्ट में, आपकी सेट की वैल्यू के आधार पर कैलकुलेट होता है. कुछ भी अपलोड नहीं होता.
सामान्य प्रश्न
Tailwind में आर्बिट्ररी-वैल्यू शैडो क्लास कैसे काम करती है?
Tailwind आपको shadow-[<any-css-value>] लिखने देता है और यह सीधे box-shadow: <any-css-value> में कंपाइल हो जाता है, किसी कॉन्फ़िग फ़ाइल बदलाव की ज़रूरत नहीं. वैल्यू के अंदर के स्पेस को अंडरस्कोर में बदलना होता है, जो यह टूल आपके लिए अपने आप कर देता है.
क्या मैं कई शैडो लेयर स्टैक कर सकता हूं?
हां, ऊपर एक और शैडो जोड़ने के लिए "लेयर जोड़ें" पर क्लिक करें. असली box-shadow कॉमा-सेपरेटेड लेयर सपोर्ट करता है, और यह टूल भी वैसे ही आर्बिट्ररी-वैल्यू क्लास बनाता है, लेयर को कॉमा से जोड़कर.
क्या यह कहीं भेजा जाता है?
नहीं, शैडो पूरी तरह आपके ब्राउज़र के CSS इंजन में बनता और प्रीव्यू होता है. कुछ भी अपलोड नहीं होता.