Tanggal :23 April 2024
Belajar Background Class Tailwind CSS

Belajar Tailwind CSS Background Class

Artikel ini bagian ke 2 dari total 3 artikel di seri Belajar Tailwind CSS

Assalamualaikum Warohmatulloh Wabarokatuh, setelah mengetahui cara menginstal Tailwind CSS. Pertama mari kita belajar tentang Background Class di Tailwind CSS.

Kenalan dengan Background Class Tailwind CSS

Tailwind CSS Background
Skema Background Class Tailwind CSS

Background Class di Tailwind CSS dituliskan dengan .bg-{color}-{shade} seperti pada ilustrasi di atas. Maksudnya bagaimana? Jadi untuk memanggil sebuah class background kita harus panggil seperti di atas. Contoh bg-teal-500 atau tanpa untuk 2 warna black & white jadi cukup bg-black / bg-white.

Selain 2 warna black & white, warna lainnya memiliki 9 shade, mulai dari 100 – 900. Shade ini mirip font-weight yang juga memiliki rentang 100 – 900 yang dengan sederhana bisa kita ketahui jika 800 akan berwarna lebih gelap daripada 700. Jika kita butuh warna kustom diantaranya kita bisa gunakan 750 misalnya.

Oke sebagai percobaan mari kita coba buat sebuah halaman sederhana dengan TailwindCSS. Pada percobaan ini kita akan menggunakan CDN karena kita tidak butuh kustomisasi.

Implementasi Pada Kode

Pertama kita akan mengubah warna dari body halaman yang kita buat dengan Tailwind CSS.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">
    <title>Tailwind CSS</title>
</head>
<body class="bg-gray-300">
    
</body>
</html>

Maka keseluruhan background halaman kita akan berubah menjadi warna abu-abu dengan shade 300 tersebut. Jika dirasa kurang gelap, coba naikkan shade ke 400 atau sebaliknya, tinggal sesuaikan dengan kebutuhan.

Berikutnya kita akan buat contoh sederhana penggunaan background ini ke dalam elemen div yang menggambarkan bagian dari sebuah halaman web.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">
    <title>Tailwind CSS</title>
</head>
<body class="bg-gray-300">
    <div class="bg-teal-500">Header</div>
    <div class="bg-blue-200">Body</div>
    <div class="bg-gray-800">Body</div>
</body>
</html>

Maka kita akan melihat 3 bagian dari halaman web dengan warna berbbeda. Tentunya halaman web kita tidak akan seperti itu ya. Hanya untuk contoh saja bagaimana background class pada Tailwind CSS ini bekerja. Kita bisa dengan fleksibel mengatur warna background sesuai yang kita kehendaki tanpa menyentuh file CSS.

Inilah salah satu alasan mengapa Tailwind CSS memiliki tingkat kepuasan yang cukup tinggi. Bagi saya yang basicnya seorang Backend Developer menggunakan Tailwind CSS ini menyenangkan. Karena kita bisa membuat tampilan yang sesuai keinginan kita tanpa harus menyentuh file CSS. Yang kalau kata teman Backend Developer lainnya “CSS is Hard” wkwkw.

Kalian Backend Developer? Bagaimana pendapatmu tentang Tailwind CSS ini?

Wassalamualaikum Warohmatulloh Wabarokatuh.

Series Navigation<< Apa itu Tailwind CSS ?Belajar Tailwind CSS : Menginstal Tailwind CSS >>

Hai semua, saya Amirul seorang Software Engineer, suka membuat konten pembelajaran berupa artikel, video tutorial maupun podcast

Tinggalkan Balasan