Install Web App

BRIEF

MINA

Tailwind

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

profil-penulis

Ahmad Dika Zulfahmi

28 Maret 2025

1. ARIA States (Status Aksesibilitas)

ARIA adalah atribut yang membantu pengguna dengan kebutuhan aksesibilitas. Tailwind memungkinkan kita menyesuaikan tampilan elemen berdasarkan status ARIA.

Contoh: Mengubah warna latar belakang jika tombol dicentang (checked)

<!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>

    <div aria-checked="true" class="bg-gray-600 aria-checked:bg-sky-700">
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptates maxime, ut repellat mollitia similique
        cumque laborum illum quibusdam suscipit et?
    </div>
</body>

</html>

 

Penjelasan:

  • Jika aria-checked="true", latar belakang berubah dari abu-abu menjadi biru.

  • Bisa diterapkan untuk atribut ARIA lain seperti aria-disabled, aria-expanded, dll.

berikut hasilnya:

Menargetkan elemen dalam grup

<th aria-sort="ascending" class="group">
  Invoice #
  <svg class="group-aria-[sort=ascending]:rotate-0 group-aria-[sort=descending]:rotate-180"></svg>
</th>

Penjelasan:

  • Jika elemen th memiliki aria-sort="ascending", ikon tidak berputar.

  • Jika aria-sort="descending", ikon akan berputar 180°.

2. Data Attributes

Kita juga bisa menggunakan atribut data-* untuk mengubah tampilan elemen berdasarkan nilai yang diberikan.

Contoh: Mengubah warna border jika elemen aktif

<div data-active class="border border-gray-300 data-active:border-purple-500">
  <!-- ... -->
</div>

 

Penjelasan:

  • Jika elemen memiliki atribut data-active, border berubah menjadi ungu.

Mengubah padding berdasarkan ukuran

<div data-size="large" class="data-[size=large]:p-8">
  <!-- ... -->
</div>

Penjelasan:

  • Jika data-size="large", padding akan lebih besar.

3. RTL (Right-to-Left) Support

Digunakan untuk mendukung bahasa yang membaca dari kanan ke kiri seperti Arab atau Ibrani.

Contoh: Mengatur margin berdasarkan arah tulisan

<!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>

    <div class="ltr:ml-3 rtl:mr-3">
        <p>Nama</p>
    </div>

</body>

</html>

Penjelasan:

  • Jika situs menggunakan mode LTR (kiri ke kanan), margin kiri (ml-3) akan diterapkan.

  • Jika RTL (kanan ke kiri), margin kanan (mr-3) yang akan diterapkan.

berikut hasilnya:

4. Open/Closed State

Digunakan untuk mengatur tampilan elemen <details> atau popover ketika dibuka atau ditutup.

Contoh: Mengubah tampilan saat <details> dibuka

<!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>

    <details class="border border-transparent open:border-black/10 open:bg-gray-100">
        <summary>Kenapa disebut Ovaltine?</summary>
        <p>Karena bentuknya bulat!</p>
    </details>

</body>

</html>

Penjelasan:

  • Saat elemen <details> dibuka (open), border dan background berubah.

berikut hasilnya:

Contoh: Mengatur tampilan popover

<div popover id="my-popover" class="opacity-0 open:opacity-100">
  <!-- ... -->
</div>

Penjelasan:

  • Saat popover terbuka (open), opasitasnya meningkat sehingga terlihat.

5. Styling Inert Elements

Digunakan untuk mengatur tampilan elemen yang diberi atribut inert (elemen yang tidak interaktif).

Contoh: Membuat elemen tampak transparan saat inert

<!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>

    <fieldset inert class="inert:opacity-50">
        <input type="text" placeholder="Tidak bisa diisi">
    </fieldset>

</body>

</html>

Penjelasan:

  • Jika elemen memiliki inert, maka opasitasnya menjadi 50% untuk menunjukkan bahwa elemen tersebut dinonaktifkan.

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

71. Belajar Tailwind CSS #71 Padding di Tailwind CSS

72. Belajar Tailwind CSS #72 Margin di Tailwind CSS

73. Belajar Tailwind CSS #73 Width di Tailwind CSS

74. Belajar Tailwind CSS #74 Min-width di Tailwind CSS

75. Belajar Tailwind CSS #75 Max-width di Tailwind CSS

76. Belajar Tailwind CSS #76 Height di Tailwind CSS

77. Belajar Tailwind CSS #77 Min-height di Tailwind CSS

78. Belajar Tailwind CSS #78 Max-height di Tailwind CSS

79. Belajar Tailwind CSS #79 Font-family di Tailwind CSS

80. Belajar Tailwind CSS #80 Font-size di Tailwind CSS

81. Belajar Tailwind CSS #81 Font-smoothing di Tailwind CSS

82. Belajar tailwind CSS #82 Font-style di Tailwind CSS

83. Belajar Tailwind CSS #83 Font-weight di Tailwind CSS

84. Belajar Tailwind CSS #84 Font-stretch di Tailwind CSS

85. Belajar Tailwind CSS #85 Font-variant-numeric di Tailwind CSS

86. Belajar Tailwind CSS #86 Letter-spacing di Tailwind CSS

87. Belajar Tailwind CSS #87 Line-clamp di Tailwind CSS

88. Belajar Tailwind CSS #88 Line-height di Tailwind CSS

89. Belajar Tailwind CSS #89 List-style-image di Tailwind CSS

90. Belajar Tailwind CSS #90 List-style-position di Tailwind CSS

91. Belajar Tailwind CSS #91 List-style-type di Tailwind CSS

92. Belajar Tailwind CSS #92 Text-align di Tailwind CSS

93. Belajar Tailwind CSS #93 Color di Tailwind CSS

94. Belajar Tailwind CSS #94 Text-decoration-line di Tailwind CSS

Masuk Terlebih dahulu untuk berkomentar

Paling baru
Lihat Lainnya