منصوبے کے بارے میں

Twin.macro compile time پر Tailwind CSS کو CSS-in-JS کے ساتھ ملا دیتا ہے۔ جب Babel JavaScript یا TypeScript فائلوں پر عمل کرتا ہے، تو Twin ان classes کو جو tw props، tw imports، یا styled calls میں لکھی گئی ہوتی ہیں، CSS objects میں تبدیل کر دیتا ہے۔ یہ objects منتخب کردہ CSS-in-JS لائبریری کو پاس کیے جاتے ہیں، لہذا classes کے لیے کسی اضافی client-side bundle کی ضرورت نہیں ہوتی۔ README کئی استعمال کے طریقے دکھاتا ہے۔ آپ JSX elements کو براہ راست tw prop کے ذریعے اسٹائل کر سکتے ہیں، جیسے کہ 'border hover:border-black' استعمال کرنے والا ایک input element۔ آپ tw کو import کر کے اسے conditional styles کے لیے css prop کے اندر nest کر سکتے ہیں، اسے css templates اور Sass جیسے syntax کے ساتھ ملا سکتے ہیں، tw.input کے ذریعے components بنا سکتے ہیں، tw(Input) کے ساتھ موجودہ components کو clone کر سکتے ہیں، اور conditional styling کے ساتھ styled استعمال کر سکتے ہیں۔ عام styling لائبریریوں سے imports کو twin.macro کے ایک ہی import میں ضم کیا جا سکتا ہے۔ Twin variant groups کو سپورٹ کرتا ہے تاکہ ایک ساتھ کئی classes پر prefixes لگائے جا سکیں، بشمول hover، focus، responsive breakpoints، before pseudo-elements، stacked variants، اور nested groups۔ جب کسی class یا variant value میں غلطی ہوتی ہے، تو یہ Tailwind config کی values استعمال کرتے ہوئے مفید تجاویز فراہم کرتا ہے۔ theme import Tailwind config سے values ظاہر کرتا ہے۔ کسی class کے شروع یا آخر میں exclamation mark (!) لگانے سے وہ !important ہو جاتی ہے، اور bracket groups کے ذریعے کئی classes پر !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، shared UI components والے workspaces، اور HeadlessUI کے لیے مثالوں کے لنکس دیے گئے ہیں۔ یہ آفیشل Tailwind VS Code پلگ ان کے ساتھ مطابقت کا ذکر بھی کرتا ہے اور کمیونٹی وسائل کے لنکس فراہم کرتا ہے، بشمول Discord، prop styling، styled components، options، advanced theming، breakpoint syncing، اور VS Code snippets/plugins پر دستاویزی گائیڈز۔ Twin ایک npm package کے طور پر تقسیم کیا گیا ہے۔