Hover, Focus, dan Other States dalam Tailwind CSS

Hello guys! Tailwind CSS merupakan Framework CSS yang banyak digunakan di Aplikasi Web Modern saat ini. Kali ini kita akan membuat Program Hover, Focus, dan Other States dalam Tailwind CSS.

Sumber : Tailwindcss.com

Setiap kelas utilitas di Tailwind dapat diterapkan secara kondisional dengan menambahkan varian di awal nama kelas yang menjelaskan kondisi yang ingin Anda targetkan.

Misalnya, untuk menerapkan kelas bg-sky-700 saat kursor diarahkan, gunakan kelas hover:bg-sky-700 :

Tips : Arahkan kursor ke tombol ini untuk melihat perubahan warna latar belakang

<button class="bg-sky-500 hover:bg-sky-700 ...">Save changes</button>

Contoh :

<button class="rounded-full bg-sky-500 px-5 py-2 text-sm leading-5 font-semibold text-white hover:bg-sky-700">
  Save changes
</button>

Bagaimana Perbandingannya dengan CSS Tradisional?

Saat menulis CSS dengan cara tradisional, satu nama kelas akan melakukan hal yang berbeda berdasarkan kondisi saat ini :

Secara Tradisional, nama kelas yang sama menerapkan gaya yang berbeda saat kursor diarahkan.

.btn-primary {
  background-color: #0ea5e9;
}

.btn-primary:hover {
  background-color: #0369a1;
}

Di Tailwind, alih-alih menambahkan gaya untuk status hover ke kelas yang sudah ada, Anda menambahkan kelas lain ke elemen yang hanya melakukan sesuatu saat hover :

Dalam Tailwind, kelas terpisah digunakan untuk status default dan status hover.

.bg-sky-500 {
  background-color: #0ea5e9;
}

.hover\:bg-sky-700:hover {
  background-color: #0369a1;
}

Kelas seperti hover:bg-sky-700 bekerja hanya saat kondisi tertentu terpenuhi, misalnya ketika kursor diarahkan ke elemen tersebut. Dalam keadaan normal, kelas ini tidak mengubah apa pun, tetapi saat di-hover, warnanya berubah menjadi sky-700.

Konsep ini menggambarkan bagaimana Tailwind CSS memungkinkan Anda menerapkan gaya yang bergantung pada keadaan tertentu secara langsung di HTML, tanpa menulis kode CSS tambahan di tempat lain.

Tailwind mencakup varian untuk hampir semua yang Anda butuhkan, termasuk :

• Kelas semu, seperti :hover, :focus, :first-child, dan :required
• Elemen semu, seperti ::before, ::after, ::placeholder, dan ::selection
• Kueri media dan fitur, seperti breakpoint responsif, mode gelap, dan prefers-reduced-motion
• Pemilih atribut, seperti [dir="rtl"] dan [open]
• Pemilih anak, seperti & > * dan & *

Varian ini bahkan dapat ditumpuk untuk menargetkan situasi yang lebih spesifik, misalnya mengubah warna latar belakang dalam mode gelap, pada titik henti sedang, saat mengarahkan kursor :

<button class="dark:md:hover:bg-fuchsia-600 ...">Save changes</button>

Dalam panduan ini Anda akan mempelajari setiap varian yang tersedia dalam kerangka kerja, cara menggunakannya dengan kelas khusus Anda sendiri, dan bahkan cara membuatnya sendiri.

Untuk selengkapnya, akan dibahas di Postingan yang Terpisah di Miniblog, yang berjudul :

1. Pseudo-Classes
2. Pseudo-Elements
3. Media and Feature Queries

Mohon maaf apabila ada kesalahan sedikit pun pada Kode Program ini.

Terima Kasih 😀😊😘👌👍 :)