کپی به عنوان Tailwind شکاف بین طراحی بصری و کد Tailwind CSS را پر میکند. روی هر عنصر در یک صفحه وب کلیک کنید و فوراً کلاسهای معادل Tailwind از استایلهای CSS محاسبهشده آن دریافت کنید — آماده الصاق در JSX، قالب Vue یا فایل HTML.
کار با Tailwind CSS یعنی فکر کردن با utility class به جای نوشتن CSS سفارشی. اما وقتی به یک طراحی موجود ارجاع میدهید — چه landing page رقیب، چه سیستم طراحی ساختهشده با vanilla CSS، چه وبسایت فعلی مشتری — ترجمه دستی استایلهای بصری به کلاسهای Tailwind خستهکننده و خطاپذیر است. کپی به عنوان Tailwind این کار را کاملاً خودکار میکند. استایلهای محاسبهشده مرورگر برای هر عنصر را میخواند و هر ویژگی را به نزدیکترین utility class Tailwind نگاشت میکند.
bg-purple-600 text-white
px-7 py-3 rounded-lg
font-semibold text-base
border-2 border-purple-400
روی هر عنصر کلیک کنید تا CSS کامل محاسبهشده آن در زمان واقعی تحلیل شود. هر ویژگی قابل اعمال به کلاس معادل Tailwind نگاشت میشود — از bg-purple-600 تا rounded-lg تا font-semibold.
این ابزار فقط جایگزینی رشته نمیکند — سیستم طراحی Tailwind را میفهمد. padding 12px به p-3 نگاشت میشود، رنگها به نزدیکترین سایه در palette Tailwind تطبیق داده میشوند و اندازههای فونت به text-sm، text-base، text-lg و غیره.
رشته کلاس تولیدشده در یک پانل خروجی تمیز نمایش داده میشود. یک بار روی دکمه کپی کلیک کنید تا کل رشته در کلیپبورد شما باشد — آماده الصاق در className در React، class در HTML یا :class در Vue.
برای جریان کاری سریعتر، روی هر عنصر در صفحه راستکلیک کنید تا مستقیماً از منوی زمینه مرورگر به «کپی به عنوان Tailwind» دسترسی داشته باشید.
فراتر از نگاشتهای ساده میرود. box shadows (shadow-md، shadow-lg)، gradients، border styles، کلاسهای flex/grid، مقادیر opacity و حتی خصوصیات واکنشگرا مانند max-width و aspect ratios را مدیریت میکند.
فقط کلاسهایی که با پیشفرضهای مرورگر متفاوت هستند را شامل میشود — بدون utility های اضافه. خروجی مختصر و آماده تولید است.
کپی به عنوان Tailwind covers the following, organized by category:
display (flex, grid, block)position (relative, absolute)flex-directionjustify-contentalign-itemsgapoverflowpadding (p-*)margin (m-*)width (w-*)height (h-*)max-widthmin-heightfont-size (text-*)font-weight (font-*)line-height (leading-*)letter-spacing (tracking-*)text-aligntext-transformcolor (text-*)background-color (bg-*)border-color (border-*)opacityborder-width (border-*)border-radius (rounded-*)border-stylebox-shadow (shadow-*)transform (scale-*, rotate-*)transitioncursorدر حال بازسازی یک وبسایت از vanilla CSS یا Bootstrap به Tailwind؟ روی هر کامپوننت اصلی در سایت موجود کلیک کنید، کلاسهای Tailwind را کپی کنید و از آنها به عنوان نقطه شروع برای کامپوننتهای جدید استفاده کنید.
یک کارت، بخش hero یا ناوبری زیبا در وبسایت دیگری پیدا کردید؟ روی آن کلیک کنید، کلاسهای Tailwind را دریافت کنید و از آنها به عنوان مرجع برای ساخت نسخه خود استفاده کنید.
هنگام ساخت کامپوننتهای جدید Tailwind از mockup Figma یا PSD، طراحی را ابتدا در مرورگر با DevTools پیادهسازی کنید، سپس با کپی به عنوان Tailwind کلاسهای دقیق را دریافت کنید.
اطمینان حاصل کنید که مقادیر CSS دستنویس شما به مقادیر معتبر مقیاس Tailwind نگاشت میشوند. اگر padding: 14px نوشتید، ابزار نشان میدهد به p-3 (12px) یا p-3.5 (14px) گرد میشود.
تازهکار در Tailwind؟ روی عناصر در هر صفحه وب کلیک کنید تا ببینید خصوصیات سنتی CSS چگونه به utility class ترجمه میشوند.
داک شناور DevSuite Pro را باز کنید و روی آیکون کپی به عنوان Tailwind کلیک کنید. ابزار فعال میشود و مکاننما به یک انتخابگر تغییر میکند.
روی هر عنصر در صفحه کلیک کنید — یک دکمه، کارت، عنوان یا نوار ناوبری. عنصر برجسته میشود و CSS محاسبهشده آن تحلیل میشود. یک پانل شناور با رشته کلاس Tailwind تولیدشده ظاهر میشود.
پانل رشته کلاس کامل Tailwind را در گروههای منطقی نشان میدهد. میتوانید دقیقاً ببینید کدام ویژگی CSS به کدام کلاس Tailwind نگاشت شده است.
روی دکمه «کپی» کلیک کنید تا رشته کلاس کامل را دریافت کنید. مستقیماً در className، ویژگی class یا قالب کامپوننت الصاق کنید.
DevSuite Pro را به صورت رایگان نصب کنید و بیش از ۳۹ ابزار توسعه را برای مرورگر خود باز کنید.