Tailwind Rəng Generatoru
Hex kodundan Tailwind CSS-in 50–950 diapazonda 11 tonluluq paletini və konfiqurasiya kodunu yaradın
Xüsusiyyətlər
1 rəngdən 11 tonluluq avtomatik yaratma
Daxil edilən rəng 500-ə qoyulur, 50–950 tonluluqları hesablanır
v3 və v4 hər iki formatını dəstəkləyin
Config və @theme yazı şəkillərini tabda dəyişdirin
Hər tonluluq üçün Hex-i kopyalayın
Rəng nümunəsi üçün düymə ilə rəng kodunu bir-bir kopyalayın
Giriş ilə bərabər paletini yeniləyin
Rəngləri sınaqdan keçirərkən müqayisə etmək üçün icra düyməsi olmadan
İstifadə Qaydası
Bazis Rəngin Hex-ini Daxil Edin
Hex kodunu daxil edin və ya sol tərəfdəki rəng nümunəsini klikləyərək rəng seçicisini seçin
Lazım gəldiyi təqdirdə rəng adını daxil edin
Kod daxilində istifadə olunacaq rəng adını ingilis kiçik hərfi ilə daxil edin. Boş olarsa primary istifadə olunur
11 tonluluq rəng nümunəsini yoxlayın
50–950 rəng nümunəsini və Hex kodunu yoxlayın, nümunə kopyalama düymə ilə bir-bir kopyalayın
Çıxış formatını seçin və kopyalayın
v3 və ya v4 seçin və "Kodu kopyalayın" ilə tailwind.config.js və ya CSS faylına yapışdırın
İstifadə Halları
Marka Rənginin Tonluluğu Yaratma
Düymə sürüşdürmə və ya fon üçün istifadə olunan tonluluğu marka rəngindən yaradın
Standart Paleti olmayan Rəngin Əlavə edilməsi
Tailwind standart rəng sətirinə olmayan layihəyə məxsus rəng konfiqurasiya faylına 11 tonluluq əlavə edin
v4 @theme Konfiqurasiyasının Yaradılması
Saytın Əsas Rəngindən Tailwind v4 CSS Dəyişkənini Yazın
Dizayn Nümunəsinin Tətbiq Hazırlığı
Kamp göstərilən rəngdən tətbiq 11 tonluluq kodunu hazırlayın və dizayn alətinə köçürün
Əsas Bilik
Tailwind-in 50–950 nə ifadə edir
Tailwind CSS rəngləri 50-nin ən açıq, 950-nin ən tünd 11 mərhələ rəqəmlərindən istifadə edərək parlaqlığı ifadə edər və 500 bu rəngin bazası olur. Rəqəmlər "bg-primary-500" və ya "text-primary-700" kimi sinif adının sonuna qoyulur.
- 50–300 mərhələsi：50–300 mərhələsi fon rəngi və ya açıq doldurma üçün istifadə olunan parlaq rəngdir, üstünə tünd mətn qoyulduqda oxunması asandır.
- 600–950 mərhələsi：600–950 mərhələsi düymə sürüşdürmə zamanı və ya başlıq mətn rəngi üçün istifadə olunan tünd rəngdir, ağ fon üstündə aydın görünür.
v3 və v4 rəng tərifinə yanaşma fərqləri
Tailwind CSS v3-də rənglər tailwind.config.js-də JavaScript ilə təyin edilir, v4-də isə CSS faylının @theme daxilində CSS dəyişkən kimi təyin edilir. Hər iki yazı şəkli olsa da, təyin edilən rəng "bg-primary-500" kimi eyni sinif adı ilə istifadə olunur.
- v3 yazı şəkli：v3 yazı şəkli theme.extend.colors daxilində "primary: { 500: '#3B82F6' }" kimi rəng adı və mərhələni daxilə qoyaraq yazılır.
- v4 yazı şəkli：v4 yazı şəkli @theme daxilində "--color-primary-500: #3B82F6;" kimi rəng adı və mərhələni defis ilə birləşdirən dəyişkən adı ilə yazılır.
Təhlükəsizlik və Gizlilik
Brauzerdə tamamlanır
Daxil edilən məlumatlar yalnız brauzerinizdə emal olunur və xaricə göndərilmir.
Yalnız brauzerde işlənmə
Palet hesablanması və kod generasiyası tamamilə sizin brauzerdə icra olunur, giriş məlumatları serverə göndərilmir.
Rabitə HTTPS ilə şifrələnir
Səhifənin yüklənməsi də TLS ilə şifrələnir, üçüncü tərəflər tərəfindən məzmun oxuna bilməz.
Üçüncü tərəflərə göndəriliş yoxdur
Reklam şəbəkələri və ya əlçatdırıcılar kimi xarici xidmətlərə giriş məzmunu göndərilmir.
Nəticənin avtomatik saxlanması yoxdur
Daxil edilən rəng və rəng adı və ya giriş seçimləri serverdə saxlanılmır.
Google Axtarışda RAKKOTOOLS-u izləyin
186 faydalı alət Google Axtarış və AI Axtarışdan daha asanlıqla tapıla biləcəkdir!
- Axtarışda tapılır
- AI Axtarışda da göstərilir
- Yeni alətləri də kəşf edin
Yeniləmə məlumatı
- update #318
Tailwind rəng generatoru əlavə edildi, 1 rəngdən 11 səviyyə rəng və konfiqurasiya kodu yaratma
Seçilmiş Alətlər
186 Veb alətindən istifadə edə bilərsiniz - tamamilə pulsuz!