Apa itu Tailwind CSS ?

Apa itu Tailwind CSS

Assalamualaikum Warohmatulloh Wabarokatuh, mungkin kawan kawan sudah sangat akrab dengan Bootstrap ya. Kali ini kita akan bahas sebuah framework CSS yang sedang ramai diperbincangkan, Tailwind CSS. Apa itu Tailwind CSS? Jika membaca pada halaman dokumentasinya dia menyebut dirinya “A utility-first CSS framework for rapidly building custom designs“.

Apa maksudnya utility-first? Jadi Tailwind CSS memiliki pendekatan yang berbeda dengan framework CSS yang sudah biasa kita lihat seperti Bootstrap, Foundation atau Bulma. Jika framework lainnya menyediakan komponen yang utuh dan tinggal kita gunakan, beda dengan Tailwind CSS yang memberikan class class kecil yang bisa kita gunakan dengan sangat fleksibel untuk membangun antarmuka yang sesuai keinginan tanpa harus override styles seperti di framework CSS lainnya.

Popularitas Tailwind CSS

Tentu dalam mempelajari sesuatu kita akan melihat popularitas dari hal yang ingin kita pelajari. Bagaimana dengan Tailwind CSS? Saya sendiri kenal Tailwind CSS karena mengikuti Twitter pembuatnya, Adam Wathan.

Untuk mengecek seberapa populer Tailwind CSS, coba cek pada halaman State of CSS tahun 2019 ini. Dari koresponden yang ada, hanya 35% orang saja yang mengetahui Tailwind CSS, tidak heran jika masih banyak yang bertanya apa itu Tailwind CSS, sedangkan 50% tertarik dengan Tailwind CSS. Dan yang cukup mengejutkan 80% orang yang sudah memakai merasa puas dengan Tailwind CSS.

Selayang Pandang Tailwind CSS

Rasanya tidak lengkap kalau kita tidak membahas tentang maksud dari utility-first yang disebut Tailwind CSS. Biar gampang, saya ambil contoh dari dokumentasinya saja.

Jika kita menggunakan CSS custom, maka kodenya kurang lebih seperti ini.

<div class="chat-notification">
  <div class="chat-notification-logo-wrapper">
    <img class="chat-notification-logo" src="/img/logo.svg" alt="ChitChat Logo">
  </div>
  <div class="chat-notification-content">
    <h4 class="chat-notification-title">ChitChat</h4>
    <p class="chat-notification-message">You have a new message!</p>
  </div>
</div>

<style>
  .chat-notification {
    display: flex;
    max-width: 24rem;
    margin: 0 auto;
    padding: 1.5rem;
    border-radius: 0.5rem;
    background-color: #fff;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  }
  .chat-notification-logo-wrapper {
    flex-shrink: 0;
  }
  .chat-notification-logo {
    height: 3rem;
    width: 3rem;
  }
  .chat-notification-content {
    margin-left: 1.5rem;
    padding-top: 0.25rem;
  }
  .chat-notification-title {
    color: #1a202c;
    font-size: 1.25rem;
    line-height: 1.25;
  }
  .chat-notification-message {
    color: #718096;
    font-size: 1rem;
    line-height: 1.5;
  }
</style>

Sedangkan dengan Tailwind CSS kita bisa membuat komponen yang sama dengan cukup ringkas.

<div class="max-w-sm mx-auto flex p-6 bg-white rounded-lg shadow-xl">
  <div class="flex-shrink-0">
    <img class="h-12 w-12" src="/img/logo.svg" alt="ChitChat Logo">
  </div>
  <div class="ml-6 pt-1">
    <h4 class="text-xl text-gray-900 leading-tight">ChitChat</h4>
    <p class="text-base text-gray-600 leading-normal">You have a new message!</p>
  </div>
</div>

Setelah melihat contoh di atas, ada beberapa keuntungan yang sangat mantap.

• Kita tidak membuang waktu untuk memikirkan nama dari class, salah satu yang memakan waktu programmer adalah menentukan nama class / variabel. Hal ini tidak terjadi dalam penggunaan Tailwind CSS.
• File CSS yang tidak mudah gemuk, dengan approach yang biasa, akan membuat file CSS cepat menjadi besar, karena setiap ada penamahan fitur kita akan menambahkannya ke CSS, dengan utilities semuanya reusable dan kita tidak perlu menuliskan CSS baru.
• Membuat perubahan terasa aman, CSS itu global dan kita tidak tahu apa yang akan rusak ketika kita melakukan perubahan. Membuat class di dalam HTML itu terjadi dalam lingkup lokal dan kita tidak perlu khawatir ada yang rusak ketika melakukan perubahan.

Sekian sedikit gambaran awal tentang Tailwind CSS, semoga nanti akan banyak pembahasan tenang Tailwind CSS di Kawan Koding.

Wassalamualaikum Warohmatulloh Wabarokatuh.