Main Menu

Belajar Tailwind CSS Dasar #3: Styling Text dan Font


👍 0 ❤️ 0 💡 0 🔥 0 🙌 0 🥳 0
Belajar Tailwind CSS Dasar #3: Styling Text dan Font

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


Fika Ridaul Maulayya
Full-Stack Developer, Content Creator and CO-Founder SantriKoding.com

Suka dengan tulisan di SantriKoding? Kamu bisa memberikan dukungan dengan berdonasi atau bagikan konten ini di sosial media. Terima kasih atas dukungan Anda!

KEBIJAKAN KOMENTAR

Saat memberikan komenatar silahkan memberikan informasi lengkap tentang error, seperti: screenshot, link kode, dll. Baca aturan komentar kami