يقوم "مساعد Tailwind" بفحص أي عنصر في صفحة الويب ويُنشئ تحليلاً شاملاً ومصنفًا لفئات خدمات Tailwind CSS المتطابقة. على عكس السلسلة النصية البسيطة للفئة، فهو ينظم النتائج حسب الفئة — التخطيط، والمسافات، والطباعة، والألوان، والحدود، والتأثيرات — حتى تفهم بالضبط ما تتحكم فيه كل فئة.
بينما تمنحك أداة "النسخ كـ Tailwind" سلسلة نصية سريعة للفئة للصقها، فإن "مساعد Tailwind" هو الرفيق للتعمق بالتفاصيل. تم تصميمه للمطورين الذين يرغبون في فهم تركيبة النمط الكاملة للعنصر بمصطلحات Tailwind. يتم تعيين كل خاصية CSS محسوبة إلى ما يعادلها في Tailwind وتجميعها في فئات منطقية. يمكنك أن ترى بلمحة سريعة أن العنصر يستخدم تخطيط flex مع محاذاة items-center، ولديه مسافة بادئة p-5 مع فجوة gap-3 بين العناصر الفرعية، ويستخدم text-lg font-bold للطباعة، ومظهره يحتوي على bg-slate-900 rounded-lg border border-slate-700. انقر فوق أي علامة فئة فردية لنسخ تلك العلامة فقط، أو استخدم "نسخ الكل" لنسخ السلسلة النصية الكاملة. العرض المصنف يجعل من السهل انتقاء الفئات التي تحتاجها بدقة بدلاً من نسخ كل شيء.
يتم تنظيم فئات Tailwind في فئات واضحة: التخطيط (flex، grid، position)، والمسافات (padding، margin، gap)، والطباعة (font size، weight، color)، والألوان (background، text، border)، والحدود (radius، width، style)، والتأثيرات (shadow، opacity، transform). كل فئة قابلة للطي ومسماة بوضوح.
انقر على أي عنصر — أزرار، بطاقات، عناوين، مدخلات، حاويات — و ستمتلئ اللوحة فوراً بالتحليل الشامل لفئات Tailwind. يتم تمييز العنصر بحد أرجواني حتى تعرف بالضبط ما يتم فحصه.
يتم عرض كل فئة Tailwind كعلامة قابلة للنقر. انقر فوق أي علامة مفردة (مثل p-5 أو font-bold) لنسخ تلك الفئة فقط إلى الحافظة الخاصة بك. تؤكد رسوم متحركة خفيفة حالة النسخ "منسوخ". مثالية عندما تحتاج فقط إلى فئة أو فئتين محددتين.
يقوم زر "نسخ جميع الفئات" الموجود في الأسفل بإنشاء سلسلة نصية نظيفة تفصل بينها مسافات لجميع فئات Tailwind بنسخها إلى الحافظة الخاصة بك. لتكون جاهزة للصق في className="..." أو class="..." مباشرةً.
يتم تعيين كل قيمة إلى مقياس المسافات والأحجام الافتراضي في Tailwind. الخط بحجم 16 بكسل يتم تعيينه إلى text-base، والمسافة البادئة 24 بكسل يتم تعيينها إلى p-6، واللون #7c3aed يتم تعيينه إلى purple-600. عندما لا يوجد تطابق تام، يتم اختيار وتحديد أقرب قيمة مقياس.
مرر مؤشر الماوس فوق أي علامة فئة Tailwind في اللوحة لرؤية قيمة CSS المحسوبة الأصلية التي تم إنشاؤها منها. على سبيل المثال، التمرير فوق "p-5" يظهر لك "padding: 20px". هذا العرض ثنائي الاتجاه يساعدك على تعلم مقياس Tailwind من خلال ربط الفئات بقيم CSS الحقيقية.
مساعد Tailwind covers the following, organized by category:
flexgridblockinline-flexrelativeabsolutestickyitems-centerjustify-betweengap-*p-* (padding)m-* (margin)px-* py-*mx-autospace-x-*w-* h-*max-w-*min-h-*text-sm / text-base / text-lgfont-normal / font-boldleading-* (line-height)tracking-* (letter-spacing)text-centeruppercasetext-{color}-{shade}bg-{color}-{shade}border-{color}-{shade}opacity-*borderborder-2rounded-* (radius)border-solid / dasheddivide-*shadow-sm / shadow-md / shadow-lgring-*transitionduration-*hover:*على عكس سلسلة الفئة المسطحة، يتيح لك العرض المصنف فهم التركيبة الكاملة للعنصر. شاهد بطاقة تستخدم تخطيط flex، ومسافة بادئة محددة، وطباعة عريضة، وخلفية slate، وحدود دائرية، وظلًا خفيفًا — كل جانب في القسم الخاص به.
افحص عنصرًا مصممًا جيدًا في أي موقع ويب، ثم أعد إنشاءه في مشروع Tailwind الخاص بك عن طريق نسخ فئات التصنيف ذات الصلة. خذ التخطيط من عنصر، والطباعة من آخر، والألوان من لوحة علامتك التجارية — قم بالمزج والمطابقة.
مرر مؤشر الماوس فوق علامات الفئات لرؤية قيم مصدر CSS. هذا التعيين التفاعلي هو أسرع طريقة لتعلم أن p-4 تعني 16 بكسل، و text-lg تعني 18 بكسل، أو أن purple-600 هي #7c3aed. حوّل أي موقع إلى تمرين تعليمي لـ Tailwind.
افحص العناصر في موقعك المبني بـ Tailwind للتحقق من أنها تستخدم مسافات وألوان وطباعة متسقة من نظام التصميم. اكتشف القيم الفردية العرضية (مثل p-[13px]) التي يجب أن تكون قيم مقياس قياسية (p-3 أو p-3.5).
استخدم "النسخ كـ Tailwind" عندما تحتاج إلى سلسلة فئة سريعة للصقها. واستخدم "مساعد Tailwind" عندما تريد دراسة التحليل الداخلي للمكون، أو نسخ الفئات الفردية بشكل انتقائي، أو فهم سبب اختيار فئات Tailwind المحددة لكل خاصية CSS.
افتح لوحة DevSuite Pro العائمة وانقر على أيقونة مساعد Tailwind. سيتم تفعيل الأداة وتظهر لوحة على الجانب الأيمن جاهزة لعرض تحليلات الفئات.
انقر على أي عنصر في الصفحة. سيتم تمييزه بحد أرجواني، وستمتلئ اللوحة بفئات Tailwind المصنفة. يتم عرض كل فئة (التخطيط، المسافات، الطباعة، الألوان، الحدود، التأثيرات) كقسم يحتوي على علامات الفئات.
تصفح التصنيفات لفهم التركيبة النمطية الكاملة للعنصر. كل فئة عبارة عن علامة قابلة للنقر — مرر الماوس لرؤية قيمة CSS المصدر، انقر لنسخ تلك الفئة الفردية.
انقر فوق العلامات الفردية لنسخ فئات محددة، أو استخدم الزر "نسخ جميع الفئات" في الأسفل لنسخ كل شيء كسلسلة نصية واحدة. الصق مباشرة في مكون Tailwind الخاص بك.
انقر فوق عنصر مختلف على الصفحة لتحديث اللوحة على الفور بفئات جديدة. لا حاجة لإلغاء التفعيل وإعادة التفعيل — استمر في النقر لفحص عناصر متعددة بالتسلسل.
قم بتثبيت DevSuite Pro مجانًا وافتح أكثر من 39 أداة للمطورين لمتصفحك.