Tailwind өнгө үүсгэгч
Нэг Hex кодоос Tailwind CSS-ийн 50–950-ын 11 түвшний палетр, тохиргооны код үүсгэх
Онцлог
Нэг өнгөнөөс 11 түвшин автоматаар үүсгэх
Оруулсан өнгөг 500 дээр байрлуулж, 50–950-ын сүүдрийг тооцоолох
v3 болон v4-ийн хоёр хэлбэрт дөмжлөгтэй
config болон @theme-ийн бичлэгийг табаар өөрчлөх
Түвшин бүрээр Hex хуулах
Өнгөний дээж бүрийн товч дээрх өнгөний кодыг нэг нэгээр хуулах
Орох үед палетр шинэчлэх
Гүйцэтгэх товчлуур шаардахгүйгээр өнгө сорьж харьцуулах
Ашигла ах
Суурь өнгөний Hex оруулах
Hex кодыг оруулах эсвэл зүүн талын өнгөний дээжээр дарж өнгөний сонгогчаар сонгох
Шаардлагатай үед өнгөний нэрийг оруулах
Кодоор ашигла өнгөний нэрийг англи жижиг үсгээр оруулах. Хоосон бол primary ашиглана
11 түвшний өнгөний дээжийг шалгах
50–950-ын өнгөний дээж болон Hex кодыг шалгаж, дээжийн хуулах товчоор нэг нэгээр хуулах
Гаралтын хэлбэрийг сонгож хуулах
v3 эсвэл v4-ийг сонгоод "Кодыг хуулах" дээр дарж tailwind.config.js эсвэл CSS файлд наалуулах
Ашигла луу
Брэнд өнгөний сүүдэр бүрдүүлэх
Товч сүүдэр, дэвсгэл гэх мэт брэнд өнгөнөөс нэг өнгөөр сүүдэр эмхэтгэх
Стандарт палеттын сүүдэрт байхгүй өнгө нэмэх
Tailwind стандарт өнгөнд байхгүй төслийн өөрийн өнгөг 11 түвшнээр тохиргооны файлд нэмэх
v4-ийн @theme тохиргоог бүрдүүлэх
Сайтын үндсэн өнгөнөөс Tailwind v4-ийн CSS хувьсагчийг бүхлийн аль юу нь бичих
Дизайны материалын хэрэгжүүлэх бэлтгэл
Материалын зааж өгсөн өнгөнөөс хэрэгжүүлэлтийн 11 түвшний кодыг бэлтгэж, дизайн хэрэгслүүд дээр дахин оруулах
Үндсэн мэдлэг
Tailwind-ийн 50–950 нь юуг илэрхийлэх
Tailwind CSS-ийн өнгө 50 хамгийн цайлсан, 950 хамгийн нүүр өнгөний 11 таг түвшний тоо нь гэрэлтүүлэгээ илэрхийлэх ба 500 нь тухайн өнгөний суурь болно. Тоо нь "bg-primary-500" эсвэл "text-primary-700" гэх мэт ангиллын нэрийн төгсгөлд нэмж ашигланаас байна.
- 50–300-ын түвшин：50–300-ын түвшин нь дэвсгэл өнгө, цайлсан буулгалт дээр бага ашиглагдаж, дээр нь нүүр үсэг нэмээд унших дуртай өнгө.
- 600–950-ын түвшин：600–950-ын түвшин нь товч сүүдэр дөхөж, гарчигийн үсэг өнгө дээр ашиглагдаж бүүлүүтэй цагаан дэвсгэлээс тод харагдаж байна.
v3 болон v4-ийн өнгө тодорхойлолтын арга ялгаа
Tailwind CSS-ийн v3 өнгөг tailwind.config.js-ын JavaScript-д тодорхойлж, v4 CSS файлаас @theme дотроос CSS хувьсагч болгон тодорхойлно. Хоёр бичлэгийн нэг ч байхаа, тодорхойлсон өнгө "bg-primary-500" гэх мэт адилхан ангилал нэрээр ашиглаж болно.
- v3-ын бичлэг：v3-ын бичлэг theme.extend.colors дотроос "primary: { 500: '#3B82F6' }" гэх мэт өнгөний нэр болон түвшин хоосноор бичсэн хэлбэр байна.
- v4-ийн бичлэг：v4-ийн бичлэг @theme дотроос "--color-primary-500: #3B82F6;" гэх мэт өнгөний нэр болон түвшний харюу сул хэсэгээр холбосон хувьсагч нэрээр бичсэн хэлбэр.
Аюулгүй байдал болон нууцлал
Браузер дотор бүрэн
Оруулсан өгөгдлийг зөвхөн таны браузер дотор боловсруулдаг бөгөөд гадагш илгээдэггүй.
Зөвхөн браузер дотор боловсруулна
Палеттын тооцоо болон кодын үүсгэл нь бүхэлдээ таны браузер дотор явагдаж, оруулсан өгөгдөл серверт илгээлэггүй.
Харилцаа холбоо HTTPS-ээр шифрлэгдсэн
Хуудсыг ачааллах нь TLS-ээр шифрлэгдсэн бөгөөд гуравдагч талаас агуулгыг унших боломжгүй.
Гуравдагч талд илгээлэггүй
Сурталчилгаа сүлжээ, мөлжээлүүлэгч болон бусад гадаад үйлчилгээнд оруулсан мэдээллийг илгээдэггүй.
Үр дүн автоматаар хадгалагдахгүй
Оруулсан өнгө эсвэл өнгөний нэр болон оруулах сурталчилгаа серверт хадгалагдахгүй.
Google хайлтаас RAKKOTOOLS-г дагах
187 ашигтай хэрэгсэл нь Google хайлт болон AI хайлтаас илүү хялбар олдох болно!
- Хайлтад олддог
- AI хайлтанд мөн гарч ирнэ
- Шинэ хэрэгсэлийг нээх
Шинэчлэлтийн мэдээлэл
- update #318
Tailwind өнгийн үүсгэгчийг нэмж, 1 өнгөөс 11 түвшний өнгө болон тохиргооны кодыг үүсгэх