Halo teman-teman semuanya, setelah kita memahami konsep utility-first dan mencoba membangun elemen sederhana dengan Tailwind CSS, sekarang saatnya kita fokus pada salah satu aspek terpenting dalam desain antarmuka: penataan teks atau typography.
Dengan Tailwind, kita bisa mengatur tampilan teks—mulai dari ukuran, warna, gaya huruf, hingga spasi—hanya dengan menambahkan utility class yang sesuai. Tidak perlu menulis CSS secara manual, semuanya bisa dilakukan langsung di HTML.
1. Mengatur Ukuran Teks
Tailwind menyediakan skala ukuran teks yang konsisten dan fleksibel. Berikut adalah beberapa class umum yang bisa kita gunakan:
| Class |
Ukuran |
Keterangan |
text-xs |
0.75rem |
Sangat kecil |
text-sm |
0.875rem |
Kecil |
text-base |
1rem |
Ukuran standar |
text-lg |
1.125rem |
Sedikit lebih besar |
text-xl |
1.25rem |
Besar |
text-2xl - text-9xl |
Hingga sangat besar |
Skala besar untuk judul |
Contoh:
<h1 class="text-3xl font-bold">Judul Besar</h1>
<p class="text-base">Ini adalah paragraf dengan ukuran teks standar.</p>
2. Mengatur Warna Teks
Untuk memberi warna pada teks, kita bisa menggunakan class dengan format text-{warna}-{tingkat}. Tailwind menyediakan banyak pilihan warna.
| Class |
Contoh Warna |
Deskripsi |
text-gray-700 |
Abu-abu tua |
Warna netral |
text-red-500 |
Merah sedang |
Cocok untuk peringatan |
text-blue-600 |
Biru tegas |
Untuk tautan / tombol |
text-green-500 |
Hijau cerah |
Umumnya untuk keberhasilan |
text-white |
Putih |
Untuk latar gelap |
Contoh:
<p class="text-red-500">Ini teks berwarna merah.</p>
<p class="text-blue-600 hover:text-blue-800">Teks dengan efek hover ke biru gelap.</p>
3. Mengatur Ketebalan Huruf
Untuk mengatur font weight atau ketebalan huruf, kita cukup menambahkan salah satu dari class berikut:
| Class |
Keterangan |
font-thin |
Sangat tipis |
font-light |
Tipis |
font-normal |
Normal (standar) |
font-medium |
Sedikit lebih tebal |
font-bold |
Tebal |
font-black |
Sangat tebal |
Contoh:
<p class="font-light">Teks dengan ketebalan ringan.</p>
<p class="font-bold">Teks tebal.</p>
4. Mengatur Jenis Huruf
Tailwind CSS menyediakan tiga pilihan dasar jenis huruf:
| Class |
Jenis Font |
font-sans |
Sans-serif (modern) |
font-serif |
Serif (klasik) |
font-mono |
Monospace (koding) |
Contoh:
<p class="font-sans">Ini teks dengan font sans-serif.</p>
<p class="font-mono">Kode: console.log("Hello")</p>
5. Penataan Tambahan: Transformasi & Dekorasi
Kita bisa menambahkan gaya tambahan pada teks seperti kapitalisasi dan garis bawah:
| Class |
Fungsi |
uppercase |
Huruf kapital semua |
lowercase |
Huruf kecil semua |
capitalize |
Huruf pertama tiap kata kapital |
underline |
Garis bawah |
line-through |
Coret |
no-underline |
Menghapus garis bawah |
Contoh:
<p class="uppercase underline">Teks kapital dan bergaris bawah</p>
<p class="capitalize line-through">teks ini dicoret</p>
6. Spasi dan Tinggi Baris
Pengaturan jarak antar huruf dan baris sangat penting untuk keterbacaan:
| Class |
Fungsi |
tracking-tight |
Spasi huruf rapat |
tracking-wide |
Spasi huruf lebar |
leading-none |
Baris sangat rapat |
leading-relaxed |
Baris agak renggang |
leading-loose |
Baris sangat renggang |
Contoh:
<p class="tracking-wide leading-relaxed">
Ini adalah paragraf dengan spasi huruf lebar dan baris yang cukup renggang.
</p>
Contoh Lengkap: Artikel Singkat
Berikut adalah contoh HTML lengkap dengan berbagai class typography.
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<title>Typography Tailwind</title>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-gray-50 p-6">
<div class="max-w-2xl mx-auto bg-white p-6 rounded-lg shadow">
<h1 class="text-3xl font-bold text-gray-800 mb-2">Belajar Typography di Tailwind</h1>
<p class="text-gray-700 text-base leading-relaxed">
Dengan menggunakan <span class="font-semibold">utility class</span> dari Tailwind CSS, kita dapat mengatur tampilan teks seperti ukuran, warna, dan spasi dengan mudah dan cepat.
</p>
<p class="text-blue-600 font-medium mt-4 underline hover:text-blue-800 transition">
Ini adalah contoh teks dengan efek hover dan underline.
</p>
<p class="text-sm text-gray-500 mt-6 uppercase tracking-wide">
teks kecil dengan huruf kapital dan spasi huruf lebar
</p>
</div>
</body>
</html>
Kesimpulan
Dengan Tailwind CSS, kita dapat menata teks dengan sangat mudah melalui kombinasi utility class untuk ukuran, warna, ketebalan, jenis huruf, hingga spasi baris dan huruf.
Semua pengaturan ini membantu kita membangun tampilan teks yang konsisten dan profesional tanpa perlu menulis CSS manual.
Di artikel selanjutnya, kita akan mempelajari bagaimana menggunakan spacing utility seperti margin dan padding untuk mengatur jarak antar elemen di halaman.
Terima Kasih