تولید رنگ Tailwind

تولید پالت 11 سطحی 50 تا 950 Tailwind CSS و کد تنظیمات از یک کد Hex

به‌روزرسانی‌هاافزودن نسل‌سازی رنگ Tailwind، ایجاد 11 سطح رنگی و کد پیکربندی از یک رنگمشاهده اطلاعات به‌روزرسانی

ویژگی‌ها

تولید خودکار 11 سطح از 1 رنگ

رنگ وارد شده را در 500 قرار دهید و سایه‌های 50 تا 950 را محاسبه کنید

پشتیبانی از فرمت v3 و v4

نحوه نوشتن config و @theme را از طریق تب‌ها تغییر دهید

کپی Hex برای هر سطح

کپی کد رنگ یک‌به‌یک با دکمه برای هر نمونه رنگ

به‌روزرسانی پالت همراه با ورودی

بدون نیاز به دکمه اجرا، رنگ‌ها را آزمایش و مقایسه کنید

نحوه استفاده

وارد کردن Hex رنگ پایه

کد Hex را وارد کنید یا بر روی نمونه رنگ در انتهای چپ کلیک کنید تا انتخاب‌کننده رنگ باز شود

اگر لازم است، نام رنگ را وارد کنید

نام رنگی را با حروف کوچک انگلیسی وارد کنید که در کد استفاده شود. اگر خالی باشد، primary استفاده می‌شود

تأیید 11 سطح نمونه رنگ

نمونه‌های رنگ و کد Hex 50 تا 950 را تأیید کنید و دکمه کپی نمونه را برای کپی یک‌به‌یک استفاده کنید

فرمت خروجی را انتخاب کرده و کپی کنید

v3 یا v4 را انتخاب کنید و با کلیک بر روی "کپی کد" آن را در tailwind.config.js یا فایل CSS خود جای دهید

موارد استفاده

ایجاد سایه‌های رنگ برند

سایه‌های مورد استفاده برای hover دکمه و پس‌زمینه را از یک رنگ برند یکسان کنید

افزودن رنگ‌های غیر موجود در پالت استاندارد

رنگ‌های انحصاری پروژه که در رنگ‌های استاندارد Tailwind وجود ندارند را با 11 سطح به فایل تنظیمات اضافه کنید

ایجاد تنظیمات @theme v4

متغیرهای CSS Tailwind v4 را از رنگ اصلی سایت نوشت

آماده‌سازی پیاده‌سازی طرح‌ریز طراحی

کد 11 سطح برای پیاده‌سازی از رنگ مشخص شده در طرح‌ریز را تهیه کنید و در ابزار طراحی نیز منتقل کنید

دانش بنیادی

معنای 50 تا 950 در Tailwind

رنگ‌های Tailwind CSS با اعداد 11 مرحله‌ای 50 تا 950 روشنایی را بیان می‌کنند که 50 روشن‌ترین و 950 تاریک‌ترین است و 500 رنگ پایه است. این اعداد در انتهای نام کلاس مانند "bg-primary-500" یا "text-primary-700" استفاده می‌شوند.

مراحل 50 تا 300：مراحل 50 تا 300 رنگ‌های روشن هستند که اغلب برای رنگ پس‌زمینه یا پرکننده‌های روشن استفاده می‌شوند و متن تیره روی آن‌ها خوانا است.
مراحل 600 تا 950：مراحل 600 تا 950 رنگ‌های تاریک هستند که اغلب برای حالت hover دکمه و رنگ متن سرنویس‌ها استفاده می‌شوند و روی پس‌زمینه سفید نمایان است.

تفاوت روش تعریف رنگ در v3 و v4

در Tailwind CSS v3 رنگ‌ها در JavaScript فایل tailwind.config.js تعریف می‌شوند و در v4 رنگ‌ها به‌عنوان متغیرهای CSS در @theme فایل CSS تعریف می‌شوند. در هر دو صورت نوشتار، رنگ‌های تعریف‌شده با نام کلاس یکسانی مانند "bg-primary-500" استفاده می‌شوند.

روش نوشتار v3：روش نوشتار v3 فرمتی است که در theme.extend.colors رنگ و مرحله را تو‌در‌تو می‌نویسند مانند "primary: { 500: '#3B82F6' }".
روش نوشتار v4：روش نوشتار v4 فرمتی است که در @theme نام متغیر را با خط تیره برای رنگ و مرحله می‌نویسند مانند "--color-primary-500: #3B82F6;".