Belajar Tailwind CSS #06 Styling dengan Utility Classes part 1
Ahmad Dika Zulfahmi
27 Maret 2025
Styling dengan Utility Classes di Tailwind CSS
Tailwind CSS memungkinkan kita untuk membuat desain dengan menggabungkan berbagai utility class langsung di dalam HTML. Ini berbeda dari metode tradisional di mana kita biasanya menulis CSS secara terpisah.
Sebagai contoh, berikut adalah cara membuat kartu sederhana dengan Tailwind:
Contoh 1: Kartu Notifikasi
<!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="mx-auto flex max-w-sm items-center gap-x-4 rounded-xl bg-white p-6 shadow-lg outline outline-black/5 dark:bg-slate-800 dark:shadow-none dark:-outline-offset-1 dark:outline-white/10">
<img class="size-12 shrink-0" src="assets/img/favicon.png" alt="ChitChat Logo" />
<div>
<div class="text-xl font-medium text-black dark:text-white">ChitChat</div>
<p class="text-gray-500 dark:text-gray-400">You have a new message!</p>
</div>
</div>
</body>
</html>
Penjelasan:
flex dan gap-x-4: Mengatur tata letak dalam bentuk flexbox dan memberi jarak antar elemen.
bg-white dan rounded-xl: Memberikan warna latar putih dan sudut membulat.
shadow-lg: Menambahkan efek bayangan.
text-xl font-medium text-black: Menentukan ukuran dan warna teks.
berikut hasilnya:
Styling Hover dan Fokus dengan Variants
Untuk menambahkan efek hover, kita bisa menggunakan prefix hover:.
Contoh 2: Tombol dengan Efek Hover
<!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 text-white px-4 py-2 rounded-md hover:bg-sky-700">
Save changes
</button>
</body>
</html>
Penjelasan:
bg-sky-500: Memberikan warna biru default.
hover:bg-sky-700: Mengubah warna saat tombol di-hover.
Hasil CSS yang dihasilkan oleh Tailwind:
.hover\:bg-sky-700:hover {
background-color: var(--color-sky-700);
}
berikut hasilnya:
Menggunakan Breakpoints (Media Queries)
Tailwind memudahkan kita untuk membuat desain responsif dengan breakpoint seperti sm:, md:, lg:, dll.
Contoh 3: Grid Responsif
<!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-2 sm:grid-cols-3">
<div class="bg-red-300 p-4">01</div>
<div class="bg-green-300 p-4">02</div>
<div class="bg-blue-300 p-4">03</div>
<div class="bg-yellow-300 p-4">04</div>
<div class="bg-purple-300 p-4">05</div>
<div class="bg-pink-300 p-4">06</div>
</div>
</body>
</html>
Penjelasan:
grid grid-cols-2: Awalnya, grid terdiri dari 2 kolom.
sm:grid-cols-3: Ketika layar lebih besar dari 640px, grid berubah menjadi 3 kolom.
berikut hasilnya:
Menggunakan Dark Mode
Dengan prefix dark:, kita bisa menerapkan tema gelap secara otomatis.
Contoh 4: Kartu dengan Dark Mode
<!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-800 rounded-lg px-6 py-8 shadow-xl">
<h3 class="text-gray-900 dark:text-white text-base font-medium">
Writes upside-down
</h3>
<p class="text-gray-500 dark:text-gray-400">
The Zero Gravity Pen can be used to write in any orientation, including upside-down. It even works in outer
space.
</p>
</div>
</body>
</html>
Penjelasan:
dark:bg-gray-800: Mengubah warna latar belakang ketika dark mode aktif.
dark:text-white: Mengubah warna teks saat mode gelap aktif.
Hasil CSS yang dihasilkan:
.dark\:bg-gray-800 {
@media (prefers-color-scheme: dark) {
background-color: var(--color-gray-800);
}
}
berikut hasilnya:
Menggunakan Arbitrary Values
Jika kita butuh nilai khusus yang tidak ada di Tailwind, kita bisa menggunakan arbitrary values dengan [].
Contoh 5: Warna Khusus
<!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-[#316ff6] text-white px-4 py-2 rounded-md">
Sign in with Facebook
</button>
</body>
</html>
Penjelasan:
bg-[#316ff6]: Menggunakan kode warna khusus (Facebook Blue).
berikut hasilnya:
Menggunakan Utility Classes untuk Filter & Effects
Kita bisa menggabungkan banyak efek menggunakan CSS variables dalam Tailwind.
Contoh 6: Efek Blur dan Grayscale
<!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="blur-sm grayscale p-8">
<p class="text-lg">This text is blurred and grayscale.</p>
</div>
</body>
</html>
Penjelasan:
blur-sm: Menambahkan efek blur ringan.
grayscale: Mengubah warna elemen menjadi abu-abu.
berikut hasilnya:
Menggunakan Group Hover
Kadang kita ingin menambahkan efek hover tidak hanya pada elemen itu sendiri, tapi juga pada anak elemen lainnya.
Contoh 7: Hover pada Elemen Parent
<!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-200 rounded-lg">
<p class="text-black group-hover:text-blue-600">Hover over this text</p>
</a>
</body>
</html>
Penjelasan:
group: Menandakan elemen sebagai grup.
group-hover:text-blue-600: Mengubah warna teks saat parent di-hover.
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
