Admin Fahru

Efek Hover, Focus, dan Active - Tailwind CSS Indonesia

Logo Tailwind CSS

Tailwind memiliki utilitas untuk mengkontrol efek hover, focus, dan active pada elemen html. Efek hover berlaku saat kursor melewati elemen html, efek focus berlaku saat input sedang dalam fokus, dan efek active berlaku saat input sedang diklik.

Beikut ini adalah contoh dari penerapan hover, focus, dan active pada elemen html menggunakan Tailwind.

Lakukan hal berikut untuk mengetahui perbedaan ketiganya :

  • Coba arahkan cursor ke tombol Sign up, efek hover akan membuat warna tombol menjadi lebih gelap. 
  • Coba klik dan tahan klik pada tombol Sign up, efek active akan membuat warna tombol menjadi merah dan efek focus akan memunculkan border biru di sekeliling tombol. 
  • Efek focus bertahan meski tidak lagi menahan klik di tombol, ini berlaku selama tidak ada elemen html lain yang diklik.
  • Efek focus dapat juga diketahui dari kolom input

Cara menggunakan efek Hover, Focus, dan Active pada Tailwind

Penerapan hover, active dan focus masing-masing digunakan sebagai prefix, sehingga kita cukup menggunakan hover:, focus:, dan active:.

Sangat disarankan untuk menggunakan Tailwind CSS Play dalam mempraktekkan contoh-contoh di bawah.

Contoh kode penggunaan hover dengan aturan background dan font berganti warna saat kursor melewati tombol namun kembali ke semula saat kursor keluar dari tombol :

<button class="bg-purple-600 hover:bg-red-500 text-white hover:text-black py-2 px-4 mx-auto rounded-lg shadow-md" type="button">
  Hover Me !
</button>

Contoh penggunaan focus dengan aturan yang sama seperti di atas, namun untuk mengaktifkan efek ini kita perlu mengklik terlebih dahulu tombolnya, efek focus tidak hilang meski kursor keluar dari tombol melainkan efeknya hilang saat kita klik bagian lain.

<button class="bg-purple-600 focus:bg-red-500 text-white focus:text-black py-2 px-4 mx-auto rounded-lg shadow-md" type="button">
  Click Me !
</button>

Efek active tidak dapat digunakan secara default sehingga perlu adanya pengaturan tambahan di file tailwind.config.js. Pada Tailwind CSS Play tidak terdapat file ini namun terdapat tab config, kita bisa mencobanya di sana.

Buka tab config di Tailwind CSS Play, masukkan kode berikut di dalam variabel untuk mengaktifkan background color dan text color pada efek active variants :

extend: {
  backgroundColor: ['active'],
  textColor: ['active']
}

sehingga file tailwind.config.js menjadi seperti ini :

const colors = require('tailwindcss/colors')

module.exports = {
  theme: {
    extend: {
      colors: {
        'light-blue': colors.lightBlue,
        cyan: colors.cyan,
      },
    },
  },
  variants: {
     extend: {
     // kita aktifkan background-color dan text color untuk efek active
        backgroundColor: ['active'],
        textColor: ['active']
     }
  },
  plugins: [],
}

Selanjutnya masukkan kode berikut di tab html untuk mengetahui cara kerja efek active

<button class="bg-purple-600 active:bg-red-500 text-white active:text-black py-2 px-4 mx-auto rounded-lg shadow-md" type="button">
  Click and Hold !
</button>

Maka hasil akhirnya kurang lebih seperti ini :

Anda bisa mengakses kode lengkap pada Tailwind CSS Play di tautan berikut : https://play.tailwindcss.com/d8K0eNan50

Banyak efek yang tidak aktif secara default sehingga perlu menambahkan variants di bagian tailwind.config.css, seperti efek active, group-focus, motion, disabled, visited, checked, first-child, event-child dan lain lainnya. Anda bisa menemukan informasi lebih lengkap di dokumentasi resmi tautan berikut Hover, Focus, & Other States - Tailwind CSS


Pengaturan
Mode
Warna
Search panel