Warna Teks dan Kelegapan
Gunakan utiliti warna teks daripada palet warna Tailwind dan laraskan kelegapan untuk menghasilkan hierarki serta kontras.
Warna Teks dan Kelegapan ialah pelajaran Tailwind CSS Academy percuma di CoddyKit. Ini ialah pelajaran 2 daripada 4. Anda boleh membaca keseluruhan pelajaran di bawah secara percuma — kemudian berlatih secara praktikal dalam pelayar menggunakan penyunting kod terbina dalam dan tutor kecerdasan buatan 24/7. Pelajaran ini merupakan sebahagian daripada laluan pembelajaran Tailwind CSS Academy, dan kemajuan anda disegerakkan merentas web serta aplikasi CoddyKit. Kursus Tailwind CSS Academy merangkumi sejumlah 4 pelajaran.
Sistem Warna Tailwind
Tailwind menyediakan palet warna yang kaya: 22 warna seperti biru, nila, merah dan hijau, setiap satunya dengan 11 rona daripada 50 (hampir putih) hingga 950 (hampir hitam). Banyak pilihan untuk digunakan.
<!-- Tailwind color naming: {color}-{shade} -->
<p class="text-blue-500">Blue 500</p>
<p class="text-blue-700">Blue 700 (darker)</p>
<p class="text-blue-200">Blue 200 (lighter)</p>Menggunakan Warna Teks
Warnakan teks dengan text-{color}-{shade}. Rona rendah lebih cerah, rona pertengahan lebih terang, dan rona tinggi lebih gelap. text-gray-700 kelihatan lembut pada latar putih; text-gray-900 memberikan kontras yang tegas.
<h1 class="text-gray-900">Main Heading</h1>
<h2 class="text-gray-700">Sub Heading</h2>
<p class="text-gray-600">Body text at a comfortable shade.</p>
<span class="text-gray-400">Metadata or secondary info</span>Warna Jenama dalam Teks
Gunakan rona terang untuk menyampaikan maksud: text-blue-600 untuk pautan, text-red-600 untuk ralat, dan text-green-600 untuk kejayaan. Konvensyen ini terasa biasa kepada pengguna dengan serta-merta.
<a href="#" class="text-blue-600 hover:text-blue-800 underline">Link</a>
<p class="text-red-600">Error: Invalid email address.</p>
<p class="text-green-600">Success: Changes saved!</p>
<p class="text-yellow-700">Warning: Disk space is low.</p>Pengubah Kelegapan Teks
Pudarkan warna dengan pengubah garis miring: text-blue-600/50 memaparkan warna biru pada kelegapan 50%. Kaedah ini lebih kemas berbanding kelegapan unsur, yang turut akan memudarkan unsur anak.
<p class="text-gray-900/100">Fully opaque</p>
<p class="text-gray-900/75">75% opacity</p>
<p class="text-gray-900/50">50% opacity</p>
<p class="text-gray-900/25">25% opacity</p>Kontras Warna untuk Kebolehcapaian
Untuk kebolehcapaian, teks memerlukan kontras yang mencukupi — sasarkan nisbah 4.5:1. Rona 700 pada latar putih biasanya melepasi piawaian; elakkan rona cerah 50 hingga 400 sebagai teks pada latar putih.
<!-- Accessible: dark text on light background -->
<p class="bg-white text-gray-800">Good contrast ratio (passes WCAG AA)</p>
<!-- Inaccessible: light text on white background -->
<p class="bg-white text-gray-300">Poor contrast (fails WCAG)</p>Warna Teks pada Latar Gelap
Pada latar gelap, gunakan teks cerah: text-white atau text-gray-100 untuk teks utama, dan text-gray-400 untuk teks sekunder. Inilah asas tema gelap yang kemas.
<div class="bg-gray-900 p-8 rounded-xl">
<h2 class="text-white font-bold text-2xl mb-2">Dark Card</h2>
<p class="text-gray-400 text-sm">Secondary text on dark background.</p>
<a href="#" class="text-indigo-400 hover:text-indigo-300">Learn more</a>
</div>Kesan Teks Gradien
Cipta kesan teks gradien dengan bg-gradient-to-r from-* to-* serta bg-clip-text text-transparent. Gradien hanya kelihatan melalui huruf — sangat moden.
<h1 class="text-5xl font-extrabold bg-gradient-to-r from-purple-600 to-pink-600 bg-clip-text text-transparent">
Gradient Headline
</h1>Perubahan Warna Apabila Dihalau
Tambahkan varian hover: untuk menukar warna teks apabila penuding diletakkan di atasnya — penting untuk pautan dan butang. Gunakan transition-colors untuk peralihan yang lancar, dan padankannya dengan focus:.
<a href="#"
class="text-gray-600 hover:text-indigo-600 focus:text-indigo-600 transition-colors duration-200 font-medium">
Hover or focus me
</a>Penggunaan Warna Semantik
Pilih palet semantik: satu warna untuk jenama, merah untuk bahaya, hijau untuk kejayaan, dan kuning untuk amaran. Apabila digunakan secara konsisten, warna membantu pengguna memahami maksud sepintas lalu.
<div class="space-y-2">
<p class="text-indigo-600 font-medium">Primary action</p>
<p class="text-red-600 font-medium">Danger / Error</p>
<p class="text-green-600 font-medium">Success / Confirmed</p>
<p class="text-yellow-700 font-medium">Warning / Caution</p>
<p class="text-gray-500 font-medium">Neutral / Disabled</p>
</div>Warna Teks dalam Mod Gelap
Tambahkan awalan dark: pada mana-mana warna teks dan ia akan digunakan dalam mod gelap. Satu baris HTML menyokong kedua-dua tema cerah dan gelap anda — tanpa penanda pendua.
<p class="text-gray-900 dark:text-gray-100">
Adapts automatically between themes.
</p>
<p class="text-gray-500 dark:text-gray-400">
Secondary text adapts too.
</p>Menggunakan Nilai Warna Arbitrari
Perlukan warna di luar palet? Gunakan kurungan siku: text-[#ff5733] untuk nilai heks tepat. Berguna untuk warna jenama, tetapi gunakan secara berhemat supaya sistem anda kekal konsisten.
<!-- Arbitrary color (one-off brand match) -->
<span class="text-[#ff5733] font-bold">Brand Orange</span>
<!-- Better: define in config for reuse -->
/* tailwind.config.js theme.extend.colors.brand: '#ff5733' */
<span class="text-brand font-bold">Brand Orange</span>Semakan Pantas
Semakan pantas! Lihat sejauh mana warna dan kelegapan difahami. 🎨
Ulang Kaji Pelajaran
Hebat! text-{color}-{shade} menggunakan palet, garis miring menetapkan kelegapan tanpa memudarkan unsur anak, dan dark: mengendalikan mod gelap. Seterusnya: ketinggian baris dan jarak.
Pelajari HTML dengan tutor kecerdasan buatan — percuma
Tulis dan jalankan kod sebenar dalam pelayar anda, dapatkan bantuan segera daripada tutor kecerdasan buatan yang tersedia 24/7, dan sambung semula dari tempat anda berhenti di web atau dalam aplikasi.
- Kursus
- 30
- Pelajaran
- 120
Soalan Lazim
Adakah pelajaran “Warna Teks dan Kelegapan” percuma?
Ya — teks penuh “Warna Teks dan Kelegapan” boleh dibaca secara percuma di web ini. Untuk berlatih secara interaktif menggunakan penyunting kod terbina dalam dan tutor kecerdasan buatan 24/7, serta membuka kunci baki kursus Tailwind CSS Academy, tingkat taraf kepada CoddyKit PRO. Kursus Tailwind CSS Academy merangkumi sejumlah 4 pelajaran.
Apakah yang akan saya pelajari dalam “Warna Teks dan Kelegapan”?
Gunakan utiliti warna teks daripada palet warna Tailwind dan laraskan kelegapan untuk menghasilkan hierarki serta kontras. Anda berlatih Tailwind CSS Academy menggunakan kod praktikal yang dijalankan terus dalam pelayar, manakala tutor kecerdasan buatan 24/7 menjawab soalan anda semasa anda mengikuti pelajaran.
Adakah saya memerlukan pengalaman untuk memulakan Tailwind CSS Academy?
Tiada pengalaman terdahulu diperlukan. Pembelajaran Tailwind CSS Academy di CoddyKit disusun untuk pelajar daripada peringkat pemula hingga lanjutan, jadi anda boleh bermula di sini atau dari awal dan belajar mengikut kadar anda sendiri. Ini ialah pelajaran 2 daripada 4.
Berapa lamakah pelajaran “Warna Teks dan Kelegapan” diambil?
Kebanyakan pelajaran CoddyKit mengambil masa kira-kira 5–10 minit. Setiap pelajaran ringkas dan interaktif, jadi anda boleh membuat kemajuan secara berterusan dan menyambung tepat dari tempat anda berhenti di web atau aplikasi.
Bolehkah saya menulis dan menjalankan kod dalam pelajaran Tailwind CSS Academy ini?
Ya. Setiap pelajaran Tailwind CSS Academy menyertakan penyunting kod terbina dalam, jadi anda boleh menulis dan menjalankan kod sebenar terus dalam pelayar serta menerima maklum balas kecerdasan buatan serta-merta — tanpa memerlukan persediaan setempat.
Semua pelajaran dalam kursus ini
- Saiz Fon dan Ketebalan Fon
- Warna Teks dan Kelegapan
- Ketinggian Baris dan Jarak Huruf
- Penjajaran dan Hiasan Teks