Tailwind CSS ფერების საცნობარო

Tailwind-ის ნაგულისხმევ პალიტრას აქვს 22 ფერთა ოჯახი (slate, gray, zinc, neutral, stone, red, orange, amber, yellow, lime, green, emerald, teal, cyan, sky, blue, indigo, violet, purple, fuchsia, pink, rose), თითოეულს — 11 ტონი 50-დან (ყველაზე ღია) 950-მდე (ყველაზე მუქი) — სულ 242 ფერი. ეს ხელსაწყო მუშაობს ორივე მიმართულებით: ჩასვით hex კოდი, მაგალითად #c4b5fd, უახლოესი შესაბამისი კლასის სახელის საპოვნელად, ან აკრიფეთ კლასი, მაგალითად bg-amber-500, მისი ზუსტი hex, RGB და სხვა utility ვარიანტების მისაღებად. ქვემოთ მოცემული პალიტრის სრული ბადე დასათვალიერებელია და თითოეული ნიმუში კლიკზე ასლავს საკუთარ hex კოდს.

რა არის ეს ხელსაწყო?

Tailwind CSS გთავაზობთ ფიქსირებულ ნაგულისხმევ ფერთა შკალას, ნაცვლად იმისა, რომ საშუალება მოგცეთ აირჩიოთ თვითნებური მნიშვნელობები გავრცელებული UI ფერებისთვის. 22 დასახელებული ოჯახიდან თითოეულს (როგორიცაა amber ან slate) აქვს ზუსტად 11 ტონი, დანომრილი 50-დან 950-მდე, და თითოეულ ტონს აქვს ერთი ოფიციალური hex მნიშვნელობა, დოკუმენტირებული თავად Tailwind-ის მიერ და გამოყენებული იდენტურად bg-, text-, border- და ring- utility კლასებში.

ეს საცნობარო ლოკალურად აერთიანებს მთელ ოფიციალურ პალიტრას, ისე რომ ფერის ან კლასის სახელის ძებნა არ საჭიროებს Tailwind-ის დოკუმენტაციის გახსნას, build-ის გაშვებას, ან კლასის PurgeCSS-ის გავლას მხოლოდ იმის სანახავად, თუ როგორ გამოიყურება. Hex ძებნები იყენებენ ევკლიდურ მანძილს RGB-ში უახლოესი ოფიციალური ტონის საპოვნელად, ხოლო კლასის ძებნები ზუსტია — აქ ყოველი მნიშვნელობა ემთხვევა Tailwind-ის დოკუმენტირებულ ნაგულისხმევ მნიშვნელობებს.

რატომ გამოვიყენო ის?

ჩასვით hex კოდი დიზაინის ფაილიდან ან სქრინშოტიდან და მყისვე მიიღეთ უახლოესი Tailwind კლასის სახელი იმის ნაცვლად, რომ გამოიცნოთ, რომელ დანომრილ ტონს შეესაბამება.
აკრიფეთ კლასის სახელი, მაგალითად slate-900 ან bg-purple-500, მისი ზუსტი hex და RGB მნიშვნელობის სანახავად Tailwind-ის დოკუმენტაციაში ძებნის გარეშე.
დაათვალიერეთ 22 ოჯახის x 11 ტონის სრული ბადე, ტონების გვერდიგვერდ შესადარებლად არჩევამდე.
მიიღეთ bg-, text-, border- და ring- ვარიანტები ნებისმიერი ტონისთვის ერთი დაწკაპუნებით, რადგან Tailwind იყენებს ერთსა და იმავე რიცხვით შკალას ყველა მათგანში.
უფასო, მყისიერი და მთლიანად ლოკალური — ატვირთვის, ანგარიშის ან build ეტაპის გარეშე.

როგორ გამოვიყენო

კლასის სახელის საპოვნელად hex კოდიდან: აკრიფეთ ან ჩასვით hex მნიშვნელობა (# სიმბოლოთი ან მის გარეშე) საძიებო ველში — უახლოესი ოფიციალური Tailwind ტონი გამოჩნდება ბადის ზემოთ, ფერთა მანძილთან ერთად, თუ ეს არ არის ზუსტი დამთხვევა.
hex მნიშვნელობის საპოვნელად კლასის სახელიდან: აკრიფეთ კლასის ან ოჯახის სახელი (მაგ. amber-500, bg-blue-600, ან უბრალოდ teal) — ზუსტი დამთხვევა აჩვენებს hex-ს, RGB-ს და ყველა utility ვარიანტს; მხოლოდ ოჯახის სახელი ფილტრავს ბადეს იმ ოჯახამდე.
ყველაფრის დასათვალიერებლად: დატოვეთ საძიებო ველი ცარიელი და დააწკაპუნეთ ბადეში ნებისმიერ ნიმუშზე — მისი დეტალები გამოჩნდება ზემოთ პანელში, ხოლო მისი hex კოდი ავტომატურად აისლება.
დააწკაპუნეთ დეტალების პანელში ნებისმიერ bg-/text-/border-/ring- ვარიანტის ღილაკზე ზუსტი კლასის სახელის ასაკოპირებლად.

მაგალითი

შეყვანა

#c4b5fd

შედეგი

violet-300 — ზუსტი დამთხვევა, #C4B5FD, rgb(196, 181, 253)

ეს hex არის Tailwind-ის საკუთარი დოკუმენტირებული ნაგულისხმევი მნიშვნელობებიდან ერთ-ერთი, ამიტომ მანძილი არის 0 და დამთხვევა ზუსტია და არა მიახლოებითი.

ხშირად დასმული კითხვები

არის ეს Tailwind CSS-ის ოფიციალური ნაგულისხმევი ფერები?

დიახ — ყველა 242 hex მნიშვნელობა (22 ოჯახი x 11 ტონი) მომდინარეობს Tailwind-ის საკუთარი დოკუმენტირებული ნაგულისხმევი პალიტრიდან. Tailwind v4 შინაგანად წარმოადგენს ფერებს OKLCH-ის სახით, მაგრამ იგივე ნაგულისხმევი პალიტრა და მისი დოკუმენტირებული hex ეკვივალენტები უცვლელია v3-თან შედარებით, ამიტომ ეს მნიშვნელობები აქტუალურია ორივე ვერსიისთვის.

რას ნიშნავს, როცა hex ძებნა არ არის ზუსტი დამთხვევა?

თუ ჩასვამთ hex კოდს, რომელიც არ არის Tailwind-ის 242 ნაგულისხმევი მნიშვნელობიდან ერთ-ერთი (მაგალითად, მორგებული ბრენდის ფერი), ხელსაწყო აჩვენებს უახლოეს ოფიციალურ ტონს RGB მანძილის მიხედვით და აღნიშნავს მას როგორც „უახლოესი დამთხვევა“ ნაჩვენები მანძილით — ის არ იქნება პიქსელობრივად იდენტური თქვენს შეყვანილთან, მხოლოდ უახლოესი Tailwind ნაგულისხმევი მნიშვნელობა.

რატომ იყენებენ bg-, text-, border- და ring- ერთსა და იმავე რიცხვებს?

Tailwind იყენებს ერთ საერთო ფერთა შკალას ყველა utility კატეგორიაში, ამიტომ bg-amber-500, text-amber-500, border-amber-500 და ring-amber-500 ყველა ერთი და იმავე hex მნიშვნელობაა, გამოყენებული სხვადასხვა CSS თვისებაზე. სწორედ ამიტომ დეტალების პანელი აჩვენებს ყველა ოთხ ვარიანტს ერთად ნებისმიერი ტონისთვის, რომელსაც ეძებთ.

შემიძლია მოვძებნო ოჯახის ჯგუფი, როგორიცაა უბრალოდ „blue“, ტონის ნომრის გარეშე?

დიახ — მხოლოდ ოჯახის სახელის აკრეფა (ნომრის გარეშე) ფილტრავს ბადეს მხოლოდ იმ ოჯახის 11 ტონამდე, რათა შეძლოთ მათი გვერდიგვერდ შედარება, კონკრეტული ტონის ჯერ არჩევის გარეშე.

მოიცავს თუ არა ეს ჩემს კონფიგურაციაში განსაზღვრულ მორგებულ Tailwind თემის ფერებს?

არა — ეს საცნობარო მოიცავს მხოლოდ Tailwind-ის ჩაშენებულ ნაგულისხმევ პალიტრას და არა ფერებს, რომლებიც დაამატეთ ან გადაფარეთ tailwind.config.js theme.extend.colors ბლოკში ან v4-ის @theme ბლოკში. თუ თქვენი პროექტი მორგებულია პალიტრაზე, თქვენი ფაქტობრივად გამოსახული ფერები შეიძლება განსხვავდებოდეს აქ ნაჩვენებისგან იმავე კლასის სახელისთვის.