Penjanaan Warna Tailwind
Jana palet keperingkatan 11 dari 50 hingga 950 Tailwind CSS dan kod konfigurasi daripada kod Hex 1 warna
Ciri-ciri
Jana 11 keperingkatan secara automatik daripada 1 warna
Tetapkan warna yang dimasukkan kepada 500 dan kira naungan dari 50 hingga 950
Menyokong kedua-dua format v3 dan v4
Tukar antara kaedah penulisan config dan @theme menggunakan tab
Salin Hex untuk setiap keperingkatan
Salin kod warna satu demi satu menggunakan butang untuk setiap sampel warna
Kemas kini palet pada masa yang sama semasa memasukkan
Tiada butang pelaksanaan diperlukan—ujikan dan bandingkan warna dengan sempurna
Cara Penggunaan
Masukkan Hex warna rujukan
Masukkan kod Hex atau klik sampel warna di sebelah kiri untuk memilih menggunakan pemilih warna
Masukkan nama warna jika diperlukan
Masukkan nama warna dalam huruf kecil untuk digunakan dalam kod. Jika kosong, primary akan digunakan
Semak sampel warna 11 keperingkatan
Semak sampel warna dan kod Hex dari 50 hingga 950, dan salin satu demi satu menggunakan butang salinan sampel
Pilih format output dan salin
Pilih v3 atau v4 dan klik "Salin Kod" untuk menampal ke tailwind.config.js atau fail CSS
Kes Penggunaan
Cipta naungan warna jenama
Pasangkan naungan yang digunakan untuk kesan titik lebih dahulu butang atau latar belakang daripada 1 warna jenama
Tambah warna yang tidak dalam palet piawai
Tambah warna unik projek dalam 11 keperingkatan ke fail konfigurasi yang tidak ada dalam warna piawai Tailwind
Cipta konfigurasi @theme v4
Tulis semula pembolehubah CSS Tailwind v4 daripada warna utama tapak
Persediaan pelaksanaan rancangan komposit
Sediakan kod keperingkatan 11 untuk pelaksanaan daripada warna yang ditentukan komposit dan juga tulis ke alat reka bentuk
Pengetahuan Asas
Apa yang diwakili oleh 50–950 Tailwind
Warna Tailwind CSS diwakili oleh 11 peringkat nombor dengan 50 paling terang dan 950 paling gelap, dengan 500 sebagai warna rujukan. Nombor digunakan pada akhir nama kelas seperti "bg-primary-500" atau "text-primary-700".
- Peringkat 50–300：Peringkat 50–300 adalah warna cerah yang sering digunakan untuk warna latar belakang atau pengisian nipis, mudah dibaca dengan teks gelap di atasnya.
- Peringkat 600–950：Peringkat 600–950 adalah warna gelap yang sering digunakan untuk kesan titik lebih dahulu butang atau warna teks tajuk, jelas dilihat pada latar belakang putih.
Perbezaan kaedah takrifan warna v3 dan v4
Dalam v3 Tailwind CSS, warna ditakrifkan dalam JavaScript tailwind.config.js, manakala dalam v4, warna ditakrifkan sebagai pembolehubah CSS dalam @theme dalam fail CSS. Dengan kedua-dua kaedah penulisan, warna yang ditakrifkan boleh digunakan dengan nama kelas yang sama seperti "bg-primary-500".
- Kaedah penulisan v3：Kaedah penulisan v3 ialah format di mana nama warna dan peringkat ditulis bersarang dalam theme.extend.colors seperti "primary: { 500: '#3B82F6' }".
- Kaedah penulisan v4：Kaedah penulisan v4 ialah format di mana nama warna dan peringkat ditulis sebagai nama pembolehubah yang disambung dengan sempang dalam @theme seperti "--color-primary-500: #3B82F6;".
Keselamatan dan Privasi
Selesai dalam pelayar
Data input diproses hanya dalam pelayar anda dan tidak dihantar ke luar.
Diproses hanya dalam pelayar
Pengiraan palet dan penjanaan kod semuanya dilakukan dalam pelayar anda, data input tidak dihantar ke pelayan.
Komunikasi disulitkan dengan HTTPS
Pemuatan halaman juga disulitkan oleh TLS, kandungan tidak boleh dibaca oleh pihak ketiga.
Tiada penghantaran kepada pihak ketiga
Kandungan input tidak dihantar ke perkhidmatan luaran seperti rangkaian iklan atau penjejak.
Tiada penyimpanan automatik hasil
Warna dan nama warna yang dimasukkan dan cadangan input tidak disimpan di pelayan.
Ikuti RAKKOTOOLS di Carian Google
186 alat berguna yang mudah ditemui dari Carian Google dan Carian AI!
- Ditemui dalam carian
- Dipaparkan dalam Carian AI
- Menemui alat baharu
Maklumat kemas kini
- update #318
Tambah penjana warna Tailwind, buat 11 tahap warna dan kod tetapan daripada 1 warna