Tanggal :1 Juni 2020

Belajar Tailwind CSS Background Class

Belajar Background Class Tailwind CSS
Artikel ini bagian ke 2 dari 3 seri dalam artikel berseri "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.

Hi Saya Amirul, Saya mengajarkan koding melalui screencast di Kawan Koding, saya juga menulis Artikel di Kawan Koding.

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *