CodeKitHubApakah alat ini?
Tailwind CSS menyediakan skala warna lalai yang tetap dan bukannya membenarkan anda memilih nilai sewenang-wenangnya untuk warna UI biasa. Setiap satu daripada 22 keluarga bernama (seperti amber atau slate) mempunyai tepat 11 kelunturan, bernombor dari 50 hingga 950, dan setiap kelunturan mempunyai satu nilai hex rasmi yang didokumenkan oleh Tailwind sendiri dan digunakan secara sama rata merentasi utility bg-, text-, border- dan ring-.
Rujukan ini menyematkan keseluruhan palet rasmi secara setempat, jadi mencari warna atau nama kelas tidak memerlukan membuka dokumentasi Tailwind, menjalankan build, atau menghantar kelas melalui PurgeCSS hanya untuk melihat bagaimana rupanya. Carian hex menggunakan jarak Euclidean RGB untuk mencari kelunturan rasmi yang paling hampir, dan carian kelas adalah tepat — setiap nilai di sini sepadan dengan nilai lalai Tailwind yang didokumenkan.
Kenapa guna alat ini?
- Tampal kod hex daripada fail reka bentuk atau tangkapan skrin dan dapatkan segera nama kelas Tailwind yang paling hampir, dan bukannya meneka kelunturan bernombor yang mana ia sepadan.
- Taip nama kelas seperti slate-900 atau bg-purple-500 untuk melihat nilai hex dan RGB yang tepat tanpa menggali dokumentasi Tailwind.
- Layari keseluruhan grid 22 keluarga x 11 kelunturan untuk membandingkan kelunturan bersebelahan sebelum memilih satu.
- Dapatkan varian bg-, text-, border- dan ring- untuk sebarang kelunturan dengan satu klik, kerana Tailwind menggunakan skala berangka yang sama merentasi kesemuanya.
- Percuma, segera dan sepenuhnya setempat — tiada muat naik, tiada akaun, tiada langkah build.
Cara menggunakannya
- Untuk mencari nama kelas daripada kod hex: taip atau tampal nilai hex (dengan atau tanpa #) ke dalam kotak carian — kelunturan Tailwind rasmi yang paling hampir muncul di atas grid, bersama jarak warna jika ia bukan padanan tepat.
- Untuk mencari nilai hex daripada nama kelas: taip nama kelas atau keluarga (contohnya amber-500, bg-blue-600, atau hanya teal) — padanan tepat menunjukkan hex, RGB dan semua varian utility; nama keluarga sahaja menapis grid kepada keluarga tersebut.
- Untuk melayari semuanya: biarkan kotak carian kosong dan klik mana-mana sampel dalam grid — butirannya muncul dalam panel di atas dan kod hex-nya disalin secara automatik.
- Klik mana-mana butang varian bg-/text-/border-/ring- dalam panel butiran untuk menyalin nama kelas yang tepat.
Contoh
Input
#c4b5fdHasil
violet-300 — Padanan tepat, #C4B5FD, rgb(196, 181, 253)Hex ini adalah salah satu nilai lalai Tailwind sendiri yang didokumenkan, jadi jaraknya ialah 0 dan padanannya adalah tepat dan bukan anggaran.
Soalan lazim
Adakah ini warna lalai rasmi Tailwind CSS?
Ya — kesemua 242 nilai hex (22 keluarga x 11 kelunturan) datang daripada palet lalai Tailwind sendiri yang didokumenkan. Tailwind v4 mewakili warna secara dalaman sebagai OKLCH, tetapi palet lalai yang sama dan padanan hex yang didokumenkan tidak berubah daripada v3, jadi nilai-nilai ini adalah terkini untuk kedua-dua versi.
Apakah maksudnya apabila carian hex bukan padanan tepat?
Jika anda menampal kod hex yang bukan salah satu daripada 242 nilai lalai Tailwind (warna jenama tersuai, sebagai contoh), alat ini menunjukkan kelunturan rasmi yang paling hampir berdasarkan jarak RGB dan melabelkannya sebagai "Padanan terhampir" dengan jarak ditunjukkan — ia tidak akan sama tepat piksel dengan input anda, hanya lalai Tailwind yang paling hampir.
Mengapakah bg-, text-, border- dan ring- semuanya menggunakan nombor yang sama?
Tailwind menggunakan satu skala warna kongsi merentasi setiap kategori utility, jadi bg-amber-500, text-amber-500, border-amber-500 dan ring-amber-500 kesemuanya adalah nilai hex asas yang sama diguna pakai pada sifat CSS yang berbeza. Itulah sebabnya panel butiran menunjukkan kesemua empat varian bersama-sama untuk sebarang kelunturan yang anda cari.
Bolehkah saya mencari kumpulan keluarga seperti hanya "blue" tanpa nombor kelunturan?
Ya — menaip nama keluarga sahaja (tanpa nombor) menapis grid kepada hanya 11 kelunturan keluarga tersebut supaya anda boleh membandingkannya bersebelahan, tanpa memilih kelunturan tertentu lagi.
Adakah ini merangkumi warna tema Tailwind tersuai yang telah saya tetapkan dalam konfigurasi saya?
Tidak — rujukan ini hanya merangkumi palet lalai terbina dalam Tailwind, bukan warna yang telah anda tambah atau ganti dalam blok tailwind.config.js theme.extend.colors atau blok @theme v4. Jika projek anda menyesuaikan palet, warna yang dipaparkan sebenar anda mungkin berbeza daripada yang ditunjukkan di sini untuk nama kelas yang sama.