افزودن به Chrome
← بازگشت به ویژگی‌ها
Pro

Tailwind Helper

Tailwind Helper هر عنصر در یک صفحه وب را بررسی می‌کند و تجزیه‌وتحلیل جامع و دسته‌بندی‌شده‌ای از کلاس‌های utility Tailwind CSS مطابق تولید می‌کند. برخلاف یک رشته کلاس ساده، نتایج را بر اساس دسته‌بندی سازماندهی می‌کند — Layout، Spacing، Typography، Colors، Borders و Effects.

افزودن به Chrome افزودن به Edge افزودن به FireFox

در حالی که کپی به عنوان Tailwind یک رشته کلاس سریع برای الصاق به شما می‌دهد، Tailwind Helper همراه بررسی عمیق است. برای توسعه‌دهندگانی ساخته شده که می‌خواهند ترکیب کامل استایل یک عنصر را به زبان Tailwind بفهمند. هر ویژگی CSS محاسبه‌شده به معادل Tailwind خود نگاشت شده و در دسته‌بندی‌های منطقی گروه‌بندی می‌شود. روی هر تگ کلاس کلیک کنید تا فقط آن کلاس را کپی کنید، یا از «کپی همه» استفاده کنید.

پیش‌نمایش زنده
example.com/dashboard
Click any element to inspect
Project Dashboard
Selected element
Progress: 65%
Tailwind Classes
Layout
flex flex-col items-start
Spacing
p-5 gap-3
Typography
text-sm font-semibold text-white
Background & Border
bg-slate-900 rounded-lg border border-slate-700
Copy All Classes
ویژگی‌های کلیدی

تجزیه‌وتحلیل دسته‌بندی‌شده کلاس

کلاس‌های Tailwind در دسته‌بندی‌های واضح سازماندهی می‌شوند: Layout (flex، grid، position)، Spacing (padding، margin، gap)، Typography (اندازه فونت، وزن، رنگ)، Colors، Borders و Effects. هر دسته‌بندی قابل جمع‌شدن است.

روی هر عنصر برای بررسی کلیک کنید

روی هر عنصر کلیک کنید — دکمه‌ها، کارت‌ها، عناوین، ورودی‌ها، containerها — و پانل فوراً با تجزیه‌وتحلیل کامل کلاس Tailwind پر می‌شود.

کپی کلاس‌های جداگانه

هر کلاس Tailwind به صورت یک تگ قابل کلیک نمایش داده می‌شود. روی هر تگ کلیک کنید (مثل p-5 یا font-bold) تا فقط آن کلاس را کپی کنید.

کپی همه کلاس‌ها یک‌جا

دکمه «کپی همه کلاس‌ها» یک رشته تمیز جدا شده با فاصله از همه کلاس‌های Tailwind تولید می‌کند. آماده الصاق در className یا class.

نگاشت دقیق مقیاس

هر مقدار به مقیاس پیش‌فرض spacing و sizing Tailwind نگاشت می‌شود. فونت 16px به text-base، padding 24px به p-6 و #7c3aed به purple-600 نگاشت می‌شود.

Hover برای مشاهده منبع CSS

روی هر تگ کلاس Tailwind در پانل hover کنید تا مقدار CSS محاسبه‌شده اصلی که از آن تولید شده را ببینید. مثلاً hover روی «p-5» نشان می‌دهد «padding: 20px».

آنچه می‌توانید بررسی کنید

Tailwind Helper covers the following, organized by category:

کلاس‌های Layout

  • flex
  • grid
  • block
  • inline-flex
  • relative
  • absolute
  • sticky
  • items-center
  • justify-between
  • gap-*

کلاس‌های Spacing

  • p-* (padding)
  • m-* (margin)
  • px-* py-*
  • mx-auto
  • space-x-*
  • w-* h-*
  • max-w-*
  • min-h-*

کلاس‌های Typography

  • text-sm / text-base / text-lg
  • font-normal / font-bold
  • leading-* (line-height)
  • tracking-* (letter-spacing)
  • text-center
  • uppercase

کلاس‌های رنگ

  • text-{color}-{shade}
  • bg-{color}-{shade}
  • border-{color}-{shade}
  • opacity-*

کلاس‌های Border

  • border
  • border-2
  • rounded-* (radius)
  • border-solid / dashed
  • divide-*

کلاس‌های Effect

  • shadow-sm / shadow-md / shadow-lg
  • ring-*
  • transition
  • duration-*
  • hover:*
موارد استفاده رایج

درک استایل کامل یک عنصر

برخلاف یک رشته کلاس مسطح، نمای دسته‌بندی‌شده به شما اجازه می‌دهد ترکیب کامل یک عنصر را بفهمید. ببینید که یک کارت از flex layout، padding خاص، تایپوگرافی bold استفاده می‌کند.

ساخت کامپوننت‌های جدید از مراجع

یک عنصر طراحی‌شده را در هر وب‌سایتی بررسی کنید، سپس با کپی کردن کلاس‌های دسته‌بندی مربوطه در پروژه Tailwind خود بازسازی کنید.

یادگیری سیستم نام‌گذاری Tailwind

روی تگ‌های کلاس hover کنید تا مقادیر CSS منبع را ببینید. این نگاشت تعاملی سریع‌ترین راه برای یادگیری است که p-4 یعنی 16px، text-lg یعنی 18px.

ممیزی استفاده از Tailwind در سایت خود

عناصر سایت ساخته‌شده با Tailwind خود را بررسی کنید تا تأیید کنید از spacing، رنگ‌ها و تایپوگرافی سازگار استفاده می‌کنند.

مقایسه کپی به عنوان Tailwind و Tailwind Helper

از کپی به عنوان Tailwind زمانی استفاده کنید که به یک رشته کلاس سریع نیاز دارید. از Tailwind Helper زمانی استفاده کنید که می‌خواهید تجزیه‌وتحلیل را مطالعه کنید.

نحوه استفاده
1

فعال‌سازی Tailwind Helper

داک شناور DevSuite Pro را باز کنید و روی آیکون Tailwind Helper کلیک کنید. ابزار فعال می‌شود و یک پانل در سمت راست ظاهر می‌شود.

2

روی عنصر برای بررسی کلیک کنید

روی هر عنصر در صفحه کلیک کنید. با حاشیه بنفش برجسته می‌شود و پانل با کلاس‌های Tailwind دسته‌بندی‌شده پر می‌شود.

3

کاوش در دسته‌بندی‌ها

در دسته‌بندی‌ها مرور کنید تا ترکیب کامل استایل عنصر را بفهمید. هر کلاس یک تگ قابل کلیک است — hover کنید تا مقدار CSS منبع را ببینید، کلیک کنید تا کپی کنید.

4

آنچه نیاز دارید کپی کنید

روی تگ‌های جداگانه کلیک کنید تا کلاس‌های خاص را کپی کنید، یا از دکمه «کپی همه کلاس‌ها» استفاده کنید. مستقیماً در کامپوننت Tailwind الصاق کنید.

5

روی عنصر دیگری کلیک کنید

روی عنصر دیگری در صفحه کلیک کنید تا پانل فوراً با کلاس‌های جدید به‌روزرسانی شود. نیازی به غیرفعال کردن نیست.

آماده برای امتحان کردن هستید؟ Tailwind Helper?

DevSuite Pro را به صورت رایگان نصب کنید و بیش از ۳۹ ابزار توسعه را برای مرورگر خود باز کنید.

افزودن به Chrome افزودن به Edge افزودن به FireFox