Imam Fahrur Rofi

Prinsip Utility-First pada Tailwind CSS

Logo Tailwind CSS

Utility-first secara harfiah artinya mengutamakan kebergunaan, setiap kode css yang ditulis seharusnya dapat digunakan pada semua elemen html. Prinsip ini juga diterapkan pada framework CSS Bootstrap, perbedaannya adalah Tailwind CSS menyaring css berdasarkan class yang ada pada element html sedangkan Bootstrap memfilter css berdasarkan konfigurasi import.

Ukuran file tailwind.min.css yang telah terkompresi dan diupload ke CDN sekitar 2.7Mb, sangat besar dibandingkan bootstrap.min.css yang hanya 137Kb saja. Dari segi kebergunaan tentu tailwind.min.css lebih banyak pilihan class dibandingkan bootstrap.min.js, namun keduanya tidak efisien karena banyak class css yang tidak digunakan tetap tertulis. Untuk mendapatkan file css optimal dari Tailwind maka kita perlu mengatur projectnya terlebih dahulu.

Secara tradisional kita menggunakan nama kelas tertentu untuk memodifikasi tampilan melalui CSS, sehingga setiap kustomisasi desain membutuhkan kostumisasi CSS juga, contohnya adalah kode berikut ini

<div class="chat-notification">
  <div class="chat-notification-logo-wrapper">
    <svg class="chat-notification-logo" fill="none" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
  <path d="M17 8h2a2 2 0 012 2v6a2 2 0 01-2 2h-2v4l-4-4H9a1.994 1.994 0 01-1.414-.586m0 0L11 14h4a2 2 0 002-2V6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2v4l.586-.586z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
</path></svg>
  </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);
    align-items: center;
    justify-content: center;
  }
  .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;
    margin:0;
  }
  .chat-notification-message {
    color: #718096;
    font-size: 1rem;
    line-height: 1.5;
    margin:0;
  }
</style>

Menghasilkan tampilan seperti ini

ChitChat

You have a new message!

Terlihat sederhana namun bisa diketahui beberapa kode css ditulis berulang seperti properti yang ada di class chat-notification-title dan chat-notification-message, dengan membuat setiap komponen html memiliki class css tertentu maka file css juga akan membesar dengan semakin banyaknya komponen html.

Dengan Tailwind, kita hanya perlu menyertakan class yang telah terdefinisikan sebelumnya saat membuat komponen html seperti ini :

<div class="p-6 max-w-sm mx-auto bg-white rounded-xl shadow-md flex items-center space-x-4">
  <div class="flex-shrink-0">
    <svg class="h-12 w-12" fill="none" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
  <path d="M17 8h2a2 2 0 012 2v6a2 2 0 01-2 2h-2v4l-4-4H9a1.994 1.994 0 01-1.414-.586m0 0L11 14h4a2 2 0 002-2V6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2v4l.586-.586z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
</path></svg>
  </div>
  <div>
    <div class="text-xl font-medium text-black">ChitChat</div>
    <p class="text-gray-500">You have a new message!</p>
  </div>
</div>

Mungkin terlihat banyak class yang dipakai, namun setiap class tersebut dapat digunakan kembali pada komponen html lain, sehingga semakin banyak komponen html tidak akan menambah ukuran css secara signifikan. Pada tampilan yang kompleks dimana kita membuat banyak komponen html dengan properti yang mirip, maka cara tailwind adalah yang terbaik untuk diterapkan.

Cara menggunakan Tailwind awalnya memang terasa rumit dibandingkan membuat CSS sendiri, namun lama kelamaan akan terasa mudah dan tidak lagi perlu menulis CSS kustom.

CSS kustom bisa ditambahkan ke Tailwind CSS namun ini tidak disarankan, setiap perubahan semisal seperti warna, ukuran layar untuk responsivitas, font, animasi dan sebagainya bisa diatur pada file konfigurasi tailwind.config.js. Dan jika memang harus ada kustomisasi maka kode cssnya bisa ditambahkan di dalam file sumber styles.css.

Prinsip Utility-First ini dapat anda pelajari lebih lengkap di dokumentasi resmi Tailwind CSS.


Pengaturan
Mode
Warna
Search panel