Belajar Tailwind CSS #10 Hover, fokus, dan status lainnya part 3
Ahmad Dika Zulfahmi
28 Maret 2025
1. Responsive Breakpoints (Tampilan Responsif)
Tailwind menyediakan kelas md, lg, dll., untuk mengubah gaya elemen berdasarkan ukuran layar.
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>
<div class="grid grid-cols-3 md:grid-cols-4 lg:grid-cols-6">
<!-- Akan menjadi 3 kolom di mobile, 4 kolom di tablet, dan 6 kolom di desktop -->
</div>
</body>
</html>
Jika ingin menyesuaikan ukuran elemen berdasarkan lebar elemen induk (bukan lebar layar), gunakan @md atau @lg:
<!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="@container">
<div class="flex flex-col @md:flex-row">
<!-- Pada mode kecil, tampil vertikal, tapi di mode lebih besar akan horizontal -->
</div>
</div>
</body>
</html>
2. prefers-color-scheme (Mode Gelap/Terang Otomatis)
Tailwind mendukung dark mode berdasarkan preferensi sistem pengguna.
Tanpa varian apa pun = warna untuk mode terang
Menggunakan dark: = warna untuk mode gelap
<!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="bg-white dark:bg-gray-900">
<h3 class="text-gray-900 dark:text-white">Teks ini berubah sesuai mode</h3>
</div>
</body>
</html>
berikut hasilnya:
3. prefers-reduced-motion (Meminimalkan Animasi)
Beberapa pengguna memilih mengurangi animasi karena alasan kenyamanan atau aksesibilitas.
Gunakan motion-reduce:hidden untuk menyembunyikan animasi jika pengguna memilih mode "reduce motion".
Gunakan motion-safe:... untuk menerapkan animasi hanya jika motion tidak dikurangi.
<!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>
<!-- Sembunyikan animasi jika pengguna meminta motion reduction -->
<button class="motion-reduce:hidden animate-spin">
Loading...
</button>
<!-- Terapkan animasi hanya jika motion tidak dikurangi -->
<button class="motion-safe:transition motion-safe:hover:-translate-x-0.5">
Save changes
</button>
</body>
</html>
berikut hasilnya:
4. prefers-contrast (Mode Kontras Tinggi/Rendah)
Pengguna mungkin memilih mode kontras tinggi untuk meningkatkan keterbacaan.
Gunakan contrast-more:... untuk menyesuaikan elemen saat mode kontras tinggi diaktifkan.
Gunakan contrast-less:... untuk mode kontras rendah.
<!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 class="border-gray-200 contrast-more:border-gray-400">
<p class="opacity-10 contrast-more:opacity-100">
Teks ini lebih jelas di mode kontras tinggi.
</p>
</body>
</html>
berikut hasilnya:
5. forced-colors (Warna Paksa dari Sistem)
Beberapa sistem operasi memungkinkan pengguna mengganti warna antarmuka dengan palet warna paksa.
Gunakan forced-colors:... untuk menyesuaikan tampilan jika mode ini aktif.
<!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="radio" class="appearance-auto forced-colors:appearance-none">
</body>
</html>
berikut hasilnya:
6. orientation (Tampilan Portrait/Landscape)
Kita bisa menampilkan atau menyembunyikan elemen berdasarkan orientasi layar.
<!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="portrait:hidden">
<!-- Elemen ini tidak muncul jika perangkat dalam mode portrait -->
</div>
<div class="landscape:hidden">
<p>Putar perangkat Anda ke mode landscape untuk melihat konten ini.</p>
</div>
</body>
</html>
7. print (Tampilan saat Dicetak)
Gunakan print:hidden untuk menyembunyikan elemen saat halaman dicetak.
<!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>
<article class="print:hidden">
<h1>Resep Rahasia Pizza</h1>
</article>
<div class="hidden print:block">
Ini hanya muncul saat halaman dicetak.
</div>
</body>
</html>
berikut hasilnya:
8. @supports (Cek Dukungan Browser untuk Fitur Tertentu)
Gunakan supports-[...] untuk mengubah gaya berdasarkan apakah browser mendukung fitur tertentu.
<div class="supports-[display:grid]:grid">
<!-- Jika browser mendukung CSS Grid, gunakan grid -->
</div>
<div class="not-supports-[display:grid]:flex">
<!-- Jika browser TIDAK mendukung CSS Grid, gunakan flexbox -->
</div>
9. @starting-style (Gaya Awal Saat Elemen Ditampilkan)
Gunakan starting:... untuk menentukan tampilan awal elemen sebelum transisi atau saat baru muncul.
<div popover id="my-popover" class="opacity-0 starting:open:opacity-0">
<!-- Popover ini awalnya transparan -->
</div>
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
