Mari Berkenalan Dengan CSS Framework Tailwind

Hallo teman-teman dumetschool pada kesempatan kali ini saya akan membahas tentang salah satu framework CSS yang banyak developer yang telah mencobanya menyebutkan akan menggantikan Bootstrap framework untuk membangun antar muka website. Baiklah langsung saja sesuai dengan judulnya Mari Berkenalan Dengan CSS Framework Tailwind.

Mari kita memulainya dengan pertanyaan Apa itu tailwind CSS ?

Bila framework pada umumnya yang kamu jumpai terdiri dari banyak pra-desain komponen, di TailwindCSS ini kamu tidak akan menemukan pra-desain komponen seperti button, card, alert, carousel atau yang lainnya. Karena TailwindCSS bukan merupakan sebuah UI kit, melainkan sebuah utility-first framework untuk membangun antarmuka kustom dengan cepat.

Sederhananya, di dalam TailwindCSS terdapat banyak class-class kecil yang merepresentasikan CSS declaration. Sehingga, ketika kamu ingin membuat sebuah komponen, maka kamu perlu menggunakan beberapa class-class kecil tersebut hingga tercipta komponen yang kamu maksud.

Oke baiklah kita langsung pada contoh penggunaanya ya teman-teman, Untuk menggunakan Tailwind CSS ada 2 cara installasi :

1. Install menggunakan NPM
2. Menggunakan CDN

Untuk di ketahui Jika kita menggunakan CDN terdapat beberapa kekurangan di banding kita menggunakan NPM beriut beberapa kekuranganya :

Oke untuk contoh sederhanya kali ini kita aka menggunakan CDN dulu ya nanti untuk kedepa yang mana saya akan membuat series tentang Tailwind CSS ini.

Untuk menggunakan Tailwind CSS via CDN bisa sisipkan script berikut di dokumen HTML teman-teman :

<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">

Jika di sisipkan di dokumen starter HTML akan jadi seperti ini :

<!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>Document</title>
</head>
<body>
    
</body>
</html>

Misal, kamu ingin membuat sebuah komponen button. Pada Bootstrap framework atau framework lain yang memiliki pra-desain komponen, kurang lebih kamu melakukannya seperti ini:

<button class="btn">Button</button>
atau
<button class="button">Button</button>

Sedangkan, pada TailwindCSS kamu perlu melakukannya seperti ini:

<button class="bg-blue-500 text-white font-bold py-2 px-4 rounded">
  Button
</button>

Class-class di atas mewakili property dan value sendiri.

bg-blue-500 merepresentasikan property background-color: #4299e1;
text-white merepresentasikan property color: #fff;
font-bold merepresentasikan property font-weight: 700;
py-2 maksudnya padding-y atau padding-vertical merepresentasikan property padding-top: 0.5rem; dan padding-bottom: 0.5rem;
px-4 maksudnya padding-x atau padding-horizontal merepresentasikan property padding-left: 1rem; dan padding-right: 1rem;
rounded merepresentasikan border-radius: .25rem;

Jadi untuk memanipulasi DOM menggunakan CSS kita bisa menggunakan Class-class yang telah di sediakan oleh Tailwind CSS dan terdapat banyak sekali class-class yang dapat di gunakan pada Dokumentasi resminya si Tailwind CSS.

Baiklah teman-teman kita cukupkan dahulu untuk Mari Berkenalan Dengan CSS Framework Tailwind, Untuk selanjutnya kita akan membahas lebih detail dan dalam lagi di artikel selanjutnya.

Mari Berkenalan Dengan CSS Framework Tailwind

Kategori