Menjadi salah satu framework css yang paling banyak digunakan bukan tanpa alasan, tailwind menyediakan banyak sekali ruang untuk developer mengembangkan website kita melalui framework ini dan salah satu dari ruang tersebut adalah tersedianya secara default untuk menyetal tampilan untuk pengguna dark-mode.

Dark Mode

Sekarang, dark mode bukan hanya menjadi add-on feature di tampilan kita melainkan salah satu fitur yang harus tersedia demi memenuhi keinginan user untuk mengostumisasi tampilan.

Untuk membuatnya semudah mungkin, Tailwind menyertakan varian ‘dark’ yang memungkinkan kita semua untuk mengatur style web secara berbeda saat mode gelap diaktifkan:

<div class="bg-white dark:bg-slate-800 rounded-lg px-6 py-8 ring-1 ring-slate-900/5 shadow-xl">
  <div>
    <span class="inline-flex items-center justify-center p-2 bg-indigo-500 rounded-md shadow-lg">
      <svg class="h-6 w-6 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true"><!-- ... --></svg>
    </span>
  </div>
  <h3 class="text-slate-900 dark:text-white mt-5 text-base font-medium tracking-tight">Writes Upside-Down</h3>
  <p class="text-slate-500 dark:text-slate-400 mt-2 text-sm">
    The Zero Gravity Pen can be used to write in any orientation, including upside-down. It even works in outer space.
  </p>
</div>

Diatas adalah adalah komponen sama, yang membuat kedua tersebut beda secara tampilan adalah yang pertama memakai setelan default dan yang kedua menggunakan setelan mode gelap yang didefinisikan menggunakan class setelah variant ‘dark’ di class.

Secara default, ini menggunakan fitur media CSS ‘prefers-color-scheme‘.

Penggunaan variant dark

Sama seperti ketika kita menambahkan class style ke element kita, seperti bg-blue-100, text-sm, dan text-white, untuk menyetel style di mode gelap, kita tambahkan variant ‘dark’ sebelum class style tersebut. Sebagai contoh:

Bila kita ingin mengubah warna background menjadi merah ketika dalam mode gelap, gunakan class berikut:

dark:bg-red-500

Dan bila kita ingin mengubah warna text menjadi putih ketika dalam mode gelap, kita bisa gunakan class berikut:

dark:text-white

Dan seterusnya…

Selesai sudah artikel ini, semoga bisa membawa manfaat kepada kalian web developer.