Install Web App

BRIEF

MINA

Tailwind

Belajar Tailwind CSS #08 Hover, fokus dan status lainnya part 1

profil-penulis

Ahmad Dika Zulfahmi

28 Maret 2025

Mengatur Gaya Berdasarkan Interaksi di Tailwind CSS

Tailwind CSS memungkinkan kita untuk mengubah tampilan elemen berdasarkan interaksi pengguna atau kondisi tertentu. Kita bisa melakukan ini dengan menambahkan varian (prefix) ke depan nama kelas.

1. Mengubah Gaya Saat Hover, Focus, dan Klik (Active)

Untuk mengubah warna latar belakang saat pengguna mengarahkan kursor ke tombol (hover), kita cukup menambahkan hover: di depan kelas yang ingin kita ubah.

Contoh:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tailwind CSS</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="styles.css">
</head>

<body>

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

</body>

</html>

Penjelasan:

  • bg-sky-500 → Warna dasar tombol.

  • hover:bg-sky-700 → Warna latar belakang berubah saat kursor berada di atas tombol.

berikut haisilnya:

Selain hover, ada juga:

  • focus: → Untuk elemen yang sedang aktif (misalnya input yang sedang diketik).

  • active: → Untuk elemen yang sedang diklik.

Contoh tombol dengan efek lengkap:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tailwind CSS</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="styles.css">
</head>

<body>

    <button class="bg-violet-500 hover:bg-violet-600 focus:outline-2 focus:outline-offset-2 focus:outline-violet-500 active:bg-violet-700">
        Save changes
      </button>
      
</body>

</html>

berikut hasilnya:

2. Mengatur Gaya Berdasarkan Posisi Elemen dalam Daftar

Kadang kita ingin menyesuaikan tampilan elemen berdasarkan posisinya, misalnya:

  • Elemen pertama (first:)

  • Elemen terakhir (last:)

  • Elemen ganjil (odd:)

  • Elemen genap (even:)

Contoh: Daftar pengguna dengan padding berbeda untuk elemen pertama & terakhir

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tailwind CSS</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="styles.css">
</head>

<body>

    <ul>
        <li class="py-4 first:pt-0 last:pb-0">User 1</li>
        <li class="py-4">User 2</li>
        <li class="py-4">User 3</li>
      </ul>
        
</body>

</html>

Penjelasan:

  • first:pt-0 → Elemen pertama tidak memiliki padding atas.

  • last:pb-0 → Elemen terakhir tidak memiliki padding bawah.

berikut hasilnya:

Contoh: Tabel dengan warna berbeda untuk baris ganjil & genap

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tailwind CSS</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="styles.css">
</head>

<body>

    <table>
        <tbody>
          <tr class="odd:bg-white even:bg-gray-50">
            <td>Nama</td>
            <td>Email</td>
          </tr>
        </tbody>
      </table>
          
</body>

</html>

Penjelasan:

  • odd:bg-white → Baris ganjil memiliki latar belakang putih.

  • even:bg-gray-50 → Baris genap memiliki latar belakang abu-abu muda.

berikut hasilnya:

3. Mengatur Gaya Berdasarkan Status Form

Kita bisa mengubah tampilan input berdasarkan statusnya, misalnya:

  • disabled: → Jika input tidak bisa digunakan.

  • required: → Jika input wajib diisi.

  • invalid: → Jika isi input salah.

Contoh: Input dengan warna berbeda untuk validasi

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tailwind CSS</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="styles.css">
</head>

<body>

    <input type="email" class="invalid:border-red-500 focus:border-blue-500 disabled:bg-gray-100">
      
</body>

</html>

Penjelasan:

  • invalid:border-red-500 → Jika email salah, border berubah merah.

  • focus:border-blue-500 → Saat diketik, border berubah biru.

  • disabled:bg-gray-100 → Jika input dinonaktifkan, latar belakang menjadi abu-abu.

berikut hasilnya:

4. Mengatur Gaya Berdasarkan Keadaan Parent (Group dan Peer)

Kadang kita ingin mengubah tampilan elemen berdasarkan status elemen lain di sekitarnya. Tailwind menyediakan dua solusi:

  1. group → Untuk mempengaruhi elemen anak berdasarkan status parent.

  2. peer → Untuk mempengaruhi elemen saudara berdasarkan status elemen lain.

Contoh: Ubah warna teks saat hover pada kartu (menggunakan group)

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tailwind CSS</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="styles.css">
</head>

<body>

    <a href="#" class="group block p-4 bg-gray-100 hover:bg-gray-200">
        <h3 class="text-gray-900 group-hover:text-blue-500">Judul</h3>
        <p class="text-gray-600 group-hover:text-blue-400">Deskripsi singkat</p>
    </a>

</body>

</html>

Penjelasan:

  • group → Memberikan identitas pada elemen utama.

  • group-hover:text-blue-500 → Saat kartu di-hover, teks judul berubah warna.

berikut haisilnya:

Contoh: Validasi input dengan peer

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tailwind CSS</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="styles.css">
</head>

<body>

    <form>
        <input type="email" class="peer border p-2" required>
        <p class="hidden peer-invalid:block text-red-500">Email tidak valid</p>
      </form>
      
</body>

</html>

Penjelasan:

  • peer → Ditambahkan ke input agar statusnya bisa dikenali oleh elemen lain.

  • peer-invalid:block → Pesan kesalahan hanya muncul jika input tidak valid.

berikut hasilnya:

 

Artikel Lainnya Dengan Kategori Terkait :

1. Belajar Tailwind CSS #01 Instalasi Tailwind CSS

2. Belajar Tailwind CSS #02 Editor Setup di Tailwind CSS

3. Belajar Tailwind CSS #03 Compatibility di Tailwind CSS

4. Belajar Tailwind CSS #04 Upgrade dari Tailwind CSS v3 ke v4

5. Belajar Tailwind CSS #05 Perubahan di Tailwind CSS v4 dengan v3

6. Belajar Tailwind CSS #06 Styling dengan Utility Classes part 1

7. Belajar Tailwind CSS #07 Styling dengan Utility Classes part 2

8. Belajar Tailwind CSS #08 Hover, fokus dan status lainnya part 1

9. Belajar Tailwind CSS #09 Hover, fokus, dan status lainnya part 2

10. Belajar Tailwind CSS #10 Hover, fokus, dan status lainnya part 3

11. Belajar Tailwind CSS #11 Hover, fokus, dan status lainnya part 4

12. Belajar Tailwind CSS #12 Hover, fokus, dan status lainnya part 5

13. Belajar Tailwind CSS #13 Responsive design part 1

14. Belajar Tailwind CSS #14 Responsive design part 2

15. Belajar tailwind CSS #15 Responsive design part 3

16. Belajar Tailwind CSS #16 Dark Mode di Tailwind

17. Belajar Tailwind CSS #17 Theme Variables part 1

18. Belajar Tailwind CSS #18 Theme Variables part 2

19. Belajar Tailwind CSS #19 Theme Variables part 3

20. Belajar Tailwind CSS #20 Tailwind CSS - Colors part 1

21. Belajar Tailwind CSS #21 Tailwind - Colors part 2

22. Belajar Tailwind CSS #22 Adding custom styles part 1

23. Belajar Tailwind CSS #23 Adding custom styles part 2

24. Belajar Tailwind CSS #24 Adding custom styles part 3

25. Belajar Tailwind CSS #25 Detecting classes in soure files

26. Belajar Tailwind CSS #26 Functions and directives

27. Belajar Tailwind CSS #27 Preflight Tailwind CSS

28. Belajar Tailwind CSS #28 Aspect-Ratio Tailwind CSS

29. Belajar Tailwind CSS #29 Tailwind CSS columns

30. Belajar Tailwind CSS #30 Tailwind CSS Break-After

31. Belajar Tailwind CSS #31 Tailwind CSS Break-Before

32. Belajar Tailwind CSS #32 Break-Inside Tailwind CSS

33. Belajar Tailwind CSS #33 Box Decoration Break Tailwind CSS

34. Belajar Tailwind CSS #34 Box Sizing Tailwind CSS

35. Belajar Tailwind CSS #35 Tailwind CSS Display

36. Belajar Tailwind CSS #36 Tailwind CSS Float

37. Belajar tailwind CSS #37 Tailwind CSS Clear

38. Belajar Tailwind CSS #38 Tailwind CSS Isolation

39. Belajar Tailwind CSS #39 Tailwind CSS Object-fit

40. Belajar Tailwind CSS #40 Tailwind CSS Object-position

41. Belajar Tailwind CSS #41 Overflow Tailwind CSS

42. Belajar Tailwind CSS #42 Tailwind CSS overscroll-behavior

43. Belajar Tailwind CSS #43 Tailwind CSS Position

44. Belajar Tailwind CSS #44 Tailwind CSS top,right,bottom,left

45. Belajar Tailwind CSS #45 Visibility di Tailwind CSS

46. Belajar Tailwind CSS #46 Z-index di Tailwind CSS

47. Belajar Tailwind CSS #47 Tailwind CSS flex-basis

48. Belajar Tailwind CSS #48 Flex-direction Tailwind CSS

49. Belajar Tailwind CSS #49 Flex-wrap Tailwind CSS

50. Belajar Tailwind CSS #50 Flex Tailwind CSS

51. Belajar Tailwind CSS #51 Flex-grow Tailwind CSS

52. Belajar Tailwind CSS #52 Flex-shrink Tailwind CSS

53. Belajar Tailwind CSS #53 Tailwind CSS order

54. Belajar Tailwind CSS #54 Grid-template-columns Tailwind CSS

55. Belajar Tailwind CSS #55 Grid-column Tailwind CSS

56. Belajar Tailwind CSS #56 Grid-template-rows Tailwind CSS

57. Belajar Tailwind CSS #57 Grid-row Tailwind CSS

58. Belajar Tailwind CSS #58 Grid-auto-flow Tailwind CSS

59. Belajar Tailwind CSS #59 Grid-auto-columns Tailwind CSS

60. Belajar Tailwind CSS #60 Grid-auto-rows Tailwind CSS

61. Belajar Tailwind CSS #61 Gap di Tailwind CSS

62. Belajar Tailwind CSS #62 Justify-content di Tailwind CSS

63. Belajar Tailwind CSS #63 Justify-items di Tailwind CSS

64. Belajar Tailwind CSS #64 Justify-self di Tailwind CSS

65. Belajar Tailwind CSS #65 Align-content di Tailwind CSS

66. Belajar Tailwind CSS #66 Align-items di Tailwind CSS

67. Belajar Tailwind CSS #67 Align-self di Tailwind CSS

68. Belajar Tailwind CSS #68 Place-content di Tailwind CSS

69. Belajar Tailwind CSS #69 Tailwind CSS place-items

70. Belajar Tailwind CSS #70 Tailwind CSS place-self

Masuk Terlebih dahulu untuk berkomentar

Paling baru
Lihat Lainnya