عن المشروع

يقوم Twin.macro بدمج Tailwind CSS مع CSS-in-JS في وقت التجميع. عندما يقوم Babel بمعالجة ملفات JavaScript أو TypeScript، يأخذ Twin الفئات المكتوبة في خصائص tw، أو استيرادات tw، أو استدعاءات styled ويحولها إلى كائنات CSS. يتم تمرير هذه الكائنات إلى مكتبة CSS-in-JS مختارة، لذا لا تحتاج الفئات إلى حزمة إضافية من جهة العميل. يوضح ملف README عدة أنماط للاستخدام. يمكنك تنسيق عناصر JSX مباشرة باستخدام خاصية tw، مثل عنصر input يستخدم 'border hover:border-black'. يمكنك استيراد tw ودمجه داخل خاصية css للتنسيقات الشرطية، ودمجه مع قوالب css وبنية تشبه Sass، وإنشاء مكونات باستخدام tw.input، واستنساخ المكونات الموجودة باستخدام tw(Input)، واستخدام styled مع التنسيق الشرطي. يمكن دمج الاستيرادات من مكتبات التنسيق الشائعة في استيراد واحد من twin.macro. يدعم Twin مجموعات المتغيرات (variant groups) لتطبيق البادئات على فئات متعددة في وقت واحد، بما في ذلك hover وfocus ونقاط التوقف responsive breakpoints والعناصر الزائفة before والمتغيرات المكدسة والمجموعات المتداخلة. كما يقدم اقتراحات مفيدة عند كتابة فئة أو قيمة متغير بشكل خاطئ، باستخدام القيم من إعدادات Tailwind config. يوفر استيراد theme القيم من Tailwind config. وتضيف علامة التعجب في بداية أو نهاية الفئة !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 وأدلة التوثيق حول تنسيق الخصائص، ومكونات styled، والخيارات، والتنسيق المتقدم، ومزامنة نقاط التوقف، وقصاصات/إضافات VS Code. يتم توزيع Twin كحزمة npm.