Tailwind Rang Generatori
1 Hex koddan Tailwind CSS 50–950 oraliq 11 darajali palitra va konfiguratsiya kodini yarating
Xususiyatlar
1 rangdan 11 darajali palitrani avtomatik yarating
Kiritilgan rangni 500 ga o'rnating va 50–950 oraliq soyalarni hisoblang
v3 va v4 ikkala shakliga mos
config va @theme yozuvini tabda almashtirib ko'ring
Har bir darajaning Hex kodini nusxalang
Rang namunasining tugmasi bilan rangning kodini birma-bir nusxalang
Kiritish bilan birgalikda palitrani yangilang
Ijro tugmasiz rangni sinab ko'rib solishtiring
Foydalanish usuli
Asosiy rang Hex kodini kiriting
Hex kodini kiritib yoki chap tarafdagi rang namunasini bosamiz rangni tanlash kutisiga tushing
Agar zarur bo'lsa rang nomini kiriting
Kodda ishlatidigan rang nomini kichik ingliz harflari bilan kiriting. Agar bo'sh bo'lsa primary ishlatiladi
11 darajali rang namunasini tekshiring
50–950 rang namunasi va Hex kodlarini tekshiring, namuna nusxalash tugmasida birma-bir nusxalang
Chiqarish shaklini tanlang va nusxalang
v3 yoki v4 ni tanlang va «Kodni nusxalash» bilan tailwind.config.js yoki CSS faylga qo'ying
Foydalanish holatlari
Brend rangining soyalar yaratish
Tugma hover yoki fonda ishlatidigan soyalarni brend rangining bitta rangidan bir xil qiling
Standart palitrada bo'lmagan ranglarni qo'shish
Tailwind standart rangida bo'lmagan loyiha xususiy ranglarini 11 darajada konfiguratsiya fayliga qo'shish
v4 @theme konfiguratsiyasini yaratish
Saytning asosiy rangidan Tailwind v4 CSS o'zgaruvchilarini to'liq yozish
Dizayn maketasini amalga oshirish tayyorligi
Maketaning belgilangan rangidan amalga oshirish uchun 11 darajali kodlarni tayyorlang va dizayn vositasiga ko'chiring
Asosiy bilimlar
Tailwind 50–950 nimani anglatadi
Tailwind CSS ranglar 50 eng engil va 950 eng to'q 11 bosqichlik raqamlar bilan yorqinlikni ifodalaydi va 500 bu rang uchun asosiy nuqta. Raqamlar «bg-primary-500» yoki «text-primary-700» kabi sinf nomining oxirida ishlatiladi.
- 50–300 bosqichi：50–300 bosqichi fon rangi yoki engil bo'yash uchun ishlatiluvchi yorqin ranglar bo'lib, ustiga to'q matn qo'yilganda ham o'qish oson bo'ladi.
- 600–950 bosqichi：600–950 bosqichi tugma hover vaqtida yoki sarlavha matn rangida ishlatiluvchi to'q ranglar bo'lib, oq fon ustida aniq ko'rinadi.
v3 va v4 ranglarining ta'rif usulining farqi
Tailwind CSS v3 da ranglar tailwind.config.js da JavaScript bilan ta'riflanadi va v4 da CSS fayldagi @theme ichida CSS o'zgaruvchisi sifatida ta'riflanadi. Har ikkala yozuv usuli ham ta'riflanmish rangni «bg-primary-500» kabi bir xil sinf nomi bilan ishlatish mumkin.
- v3 yozuv usuli：v3 yozuv usuli theme.extend.colors ichida «primary: { 500: '#3B82F6' }» kabi rang nomi va bosqichlarni joylashtirilgan shakl.
- v4 yozuv usuli：v4 yozuv usuli @theme ichida «--color-primary-500: #3B82F6;» kabi rang nomi va bosqichlarni defis bilan ulanmagan o'zgaruvchi nomi shakli.
Xavfsizlik va Maxfiylik
Faqat brauzerda
Kiritilgan ma'lumotlar faqat brauzeringizda qayta ishlanadi va tashqariga yuborilmaydi.
Faqat brauzer ichida qayta ishlash
Palitrani hisoblash va kod yaratish sizning brauzeringiz ichida bajariladi va kirish ma'lumotlari serverga yuborilmaydi.
Aloqa HTTPS orqali shifrlangan
Sahifani yuklash ham TLS orqali shifrlangan bo'lib, uchinchi tomonlar tomonidan tarkibi o'qilmaydi.
Uchinchi tomonlarga yuborish yo'q
Kirish tarkibi reklama tarmog'i yoki kuzatuvchi kabi tashqi xizmatlariga yuborilmaydi.
Natijalani avtomatik saqlash yo'q
Kiritilgan rang yoki rang nomi yoki kirish variantlari serverda saqlanmaydi.
Google qidiruvda RAKKOTOOLS ni kuzatib turing
186 ta qulay vosita Google qidiruv va AI qidiruvdan osonroq topiladi!
- qidiruvda topiladi
- AI qidiruvda ham ko'rsatiladi
- yangi vositalarni ham kashf eting
Yangilanishlar
- update #318
Tailwind rangi generatori qo'shildi, 1 rangdan 11 darajali ranglar va konfiguratsiya kodini yaratish
Ajralib vositalar
186ta bepul veb-asbobdan hoziroq foydalanishingiz mumkin!