Halo teman-teman semuanya, setelah sebelumnya kita mempelajari bagaimana mengatur layout dengan menggunakan margin dan padding, sekarang saatnya kita berkenalan dengan class Tailwind CSS yang berhubungan dengan warna teks, latar belakang, dan garis tepi (border).
Tiga bagian ini sangat penting untuk mempercantik tampilan dan menonjolkan elemen tertentu di halaman web. Tailwind CSS menyediakan ratusan kombinasi warna dan utilitas yang bisa langsung kita gunakan — tanpa perlu repot menulis kode CSS manual.
1. Warna Teks
Seperti yang sudah disinggung di artikel sebelumnya, kita bisa mengubah warna teks menggunakan class text-{warna}-{tingkat}.
| Class |
Deskripsi |
text-black |
Hitam |
text-white |
Putih |
text-gray-600 |
Abu gelap |
text-blue-500 |
Biru sedang |
text-red-400 |
Merah terang |
hover:text-blue-700 |
Efek hover pada teks |
Contoh:
<p class="text-blue-500">Ini teks biru sedang.</p>
<p class="text-gray-600">Ini teks abu gelap.</p>
<p class="text-red-400 hover:text-red-600">Teks merah dengan efek hover.</p>
2. Warna Latar Belakang (Background)
Untuk memberi warna latar pada elemen, gunakan class bg-{warna}-{tingkat}.
| Class |
Deskripsi |
bg-white |
Latar putih |
bg-gray-100 |
Abu muda |
bg-yellow-200 |
Kuning terang |
bg-green-500 |
Hijau cerah |
bg-blue-600 |
Biru tegas |
hover:bg-blue-800 |
Latar berubah saat hover |
Contoh:
<div class="bg-green-500 text-white p-4 rounded">
Latar hijau dengan teks putih
</div>
<button class="bg-blue-600 hover:bg-blue-800 text-white px-4 py-2 mt-4 rounded">
Tombol Hover
</button>
3. Warna Border
Tailwind juga mendukung warna untuk border menggunakan border-{warna}-{tingkat}.
| Class |
Deskripsi |
border |
Menampilkan garis tepi dasar |
border-gray-300 |
Garis abu terang |
border-red-500 |
Garis merah |
border-blue-600 |
Garis biru |
hover:border-black |
Efek hover untuk border |
Contoh:
<div class="border border-gray-300 p-4 rounded mb-4">
Kontainer dengan garis abu terang
</div>
<input class="border-2 border-blue-600 hover:border-black p-2" placeholder="Masukkan teks" />
4. Lebar & Bentuk Border
Selain warna, kita juga bisa mengatur ketebalan dan bentuk sudut border.
| Class |
Fungsi |
border |
Garis tepi default (1px) |
border-2 |
Garis tepi 2px |
border-4 |
Garis tepi 4px |
rounded |
Sudut membulat kecil |
rounded-lg |
Sudut membulat besar |
rounded-full |
Sudut melengkung penuh (lingkaran) |
Contoh:
<div class="border-4 border-red-400 rounded-lg p-4 mb-4">
Kotak dengan border tebal dan sudut membulat
</div>
<img src="https://via.placeholder.com/100" class="border border-gray-400 rounded-full" alt="Gambar bulat" />
Contoh Lengkap: Kartu Warna-warni
Langsung saja kita lihat implementasinya dalam kode HTML berikut.
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<title>Kartu Warna</title>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-gray-100 p-6">
<div class="max-w-md mx-auto bg-white p-6 rounded-lg shadow-md border border-blue-300">
<h2 class="text-xl font-bold text-blue-700 mb-2">Judul Kartu</h2>
<p class="text-gray-700 mb-4">
Ini adalah kartu dengan warna teks biru, latar putih, dan garis tepi biru. Kombinasi warna ini mudah dibuat dengan Tailwind CSS.
</p>
<button class="bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-800 transition">
Klik Saya
</button>
</div>
</body>
</html>
Contoh di atas menggunakan bg-white untuk latar belakang kartu, text-blue-700 untuk judul, border-blue-300 untuk garis tepi, dan tombol biru dengan efek hover.
Kesimpulan
Dengan Tailwind CSS, kita bisa mengatur warna teks, latar belakang, dan border dengan cepat dan fleksibel. Tidak perlu menulis deklarasi CSS satu per satu — cukup gunakan kombinasi utility class seperti bg-gray-100, text-blue-700, atau border-2 rounded-lg.
Pada artikel berikutnya, kita akan membahas tentang sistem grid dan flexbox di Tailwind untuk membangun layout yang lebih kompleks dan responsif.
Terima Kasih