इस प्रोजेक्ट के बारे में

Twin.macro कंपाइल टाइम पर Tailwind CSS को CSS-in-JS के साथ मिलाता है। जब Babel JavaScript या TypeScript फ़ाइलों को प्रोसेस करता है, तो Twin tw props, tw imports, या styled कॉल्स में लिखी गई क्लासेस को लेता है और उन्हें CSS ऑब्जेक्ट्स में बदल देता है। ये ऑब्जेक्ट्स एक चुने हुए CSS-in-JS लाइब्रेरी को पास किए जाते हैं, इसलिए क्लासेस के लिए अतिरिक्त क्लाइंट-साइड बंडल की आवश्यकता नहीं होती है। README कई उपयोग पैटर्न दिखाता है। आप JSX तत्वों को सीधे tw prop के साथ स्टाइल कर सकते हैं, जैसे 'border hover:border-black' का उपयोग करने वाला एक input तत्व। आप tw को इम्पोर्ट कर सकते हैं और कंडीशनल स्टाइल के लिए इसे css prop के अंदर नेस्ट कर सकते हैं, इसे css टेम्पलेट्स और Sass-जैसे सिंटैक्स के साथ मिला सकते हैं, tw.input के साथ कंपोनेंट्स बना सकते हैं, tw(Input) के साथ मौजूदा कंपोनेंट्स को क्लोन कर सकते हैं, और कंडीशनल स्टाइलिंग के साथ styled का उपयोग कर सकते हैं। सामान्य स्टाइलिंग लाइब्रेरीज़ से इम्पोर्ट्स को twin.macro से एक सिंगल इम्पोर्ट में समेटा जा सकता है। Twin एक साथ कई क्लासेस पर प्रीफिक्स लगाने के लिए वेरिएंट ग्रुप्स का समर्थन करता है, जिसमें hover, focus, रिस्पॉन्सिव ब्रेकपॉइंट्स, before स्यूडो-एलिमेंट्स, स्टैक्ड वेरिएंट्स और नेस्टेड ग्रुप्स शामिल हैं। जब किसी क्लास या वेरिएंट वैल्यू में टाइपिंग की गलती होती है, तो यह Tailwind कॉन्फ़िग के वैल्यूज़ का उपयोग करके सहायक सुझाव देता है। theme इम्पोर्ट Tailwind कॉन्फ़िग से वैल्यूज़ को एक्सपोज़ करता है। एक ट्रेलिंग या लीडिंग विस्मयादिबोधक चिह्न (!) क्लास में !important जोड़ता है, और ब्रैकेट ग्रुप्स कई क्लासेस पर !important लागू कर सकते हैं। यह प्रोजेक्ट emotion, styled-components, solid-styled-components, stitches और goober के साथ काम करता है। README में Parcel, Webpack, Preact, Create React App, Vite, Jest/React Testing Library, Next.js, T3 App, Blitz.js, Gatsby, Storybook, साझा UI कंपोनेंट्स वाले वर्कस्पेस और HeadlessUI के उदाहरणों के लिंक दिए गए हैं। यह आधिकारिक Tailwind VS Code प्लगइन के साथ अनुकूलता का भी उल्लेख करता है और कम्युनिटी रिसोर्सेज के लिंक प्रदान करता है, जिसमें Discord, prop स्टाइलिंग, styled कंपोनेंट्स, ऑप्शंस, एडवांस्ड थीमिंग, ब्रेकपॉइंट सिंकिंग और VS Code स्निपेट्स/प्लगइन्स पर डॉक्यूमेंटेशन गाइड शामिल हैं। Twin एक npm पैकेज के रूप में वितरित किया जाता है।