Belajar Tailwind CSS #07 Styling dengan Utility Classes part 2
Ahmad Dika Zulfahmi
28 Maret 2025
Mengelola Duplikasi dalam Tailwind CSS
Saat membangun proyek dengan Tailwind CSS, sering kali kita menggunakan banyak class yang sama berulang kali di berbagai tempat. Misalnya, dalam daftar avatar kontributor, kita menggunakan class yang sama untuk setiap gambar avatar.
1. Menggunakan Loop
Daripada menuliskan ulang class untuk setiap elemen, kita bisa menggunakan loop (seperti dalam JavaScript, React, atau templating engine lainnya). Dengan cara ini, kode menjadi lebih ringkas dan lebih mudah dikelola.
Sebelumnya (Tanpa Loop, Class Ditulis Berulang):
<!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>
<img class="inline-block h-12 w-12 rounded-full ring-2 ring-white" src="https://images.unsplash.com/photo-1491528323818-fdd1faba62cc?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" />
<img class="inline-block h-12 w-12 rounded-full ring-2 ring-white" src="https://images.unsplash.com/photo-1550525811-e5869dd03032?ixlib=rb-1.2.1&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" />
</body>
</html>
Setelah Menggunakan Loop (Misalnya dengan Svelte/Handlebars):
{#each contributors as user}
<img class="inline-block h-12 w-12 rounded-full ring-2 ring-white" src={user.avatarUrl} alt={user.handle} />
{/each}
Hasilnya sama, tetapi lebih efisien dan mudah diperbarui
berikut hasilnya:
2. Menggunakan Multi-Cursor Editing
Jika duplikasi hanya terjadi dalam satu file, cara termudah adalah dengan menggunakan fitur multi-cursor editing di editor seperti VS Code. Ini memungkinkan kita mengedit banyak elemen sekaligus.
Misalnya, jika ada banyak link navigasi dengan class yang sama:
<!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="/home" class="font-medium px-3 py-2 text-gray-700 hover:bg-gray-100">Home</a>
<a href="/team" class="font-medium px-3 py-2 text-gray-700 hover:bg-gray-100">Team</a>
</body>
</html>
Dengan multi-cursor editing, kita bisa mengedit semua sekaligus tanpa menyalin-tempel secara manual.
berikut hasilnya:
3. Menggunakan Komponen
Jika kita sering menggunakan elemen yang sama di banyak file, cara terbaik adalah membuat komponen.
Contoh di React:
export function Avatar({ src, alt }) {
return <img className="inline-block h-12 w-12 rounded-full ring-2 ring-white" src={src} alt={alt} />;
}
Lalu kita bisa menggunakannya berulang kali seperti ini:
<Avatar src="avatar1.jpg" alt="User 1" />
<Avatar src="avatar2.jpg" alt="User 2" />
Dengan cara ini, kita hanya perlu memperbarui class di satu tempat jika ingin mengubah tampilan
4. Menggunakan CSS Kustom
Kadang-kadang, menggunakan Tailwind untuk elemen kecil seperti tombol bisa terasa berlebihan. Kita bisa membuat class kustom sendiri.
Contoh tombol kustom:
@layer components {
.btn-primary {
border-radius: 8px;
background-color: var(--color-violet-500);
padding: 8px 16px;
font-weight: bold;
color: white;
box-shadow: var(--shadow-md);
}
.btn-primary:hover {
background-color: var(--color-violet-700);
}
}
Penggunaan di HTML:
<!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="btn-primary">Save changes</button>
</body>
</html>
berikut hasilnya:
Mengelola Konflik Gaya
1. Konflik Class Utility
Jika ada dua class yang mengatur properti yang sama, class yang terakhir dalam CSS akan menang.
<div class="grid flex">
<!-- Akan tetap menjadi grid karena class "grid" muncul lebih dulu di CSS -->
</div>
Solusinya: gunakan hanya class yang benar-benar diperlukan.
2. Menggunakan !important
Jika perlu memastikan class tertentu yang berlaku, tambahkan tanda ! di akhir class.
<div class="bg-teal-500 bg-red-500!">
<!-- Latar belakang akan merah karena ada ! -->
</div>
Gunakan ini hanya jika benar-benar perlu.
3. Menambahkan Prefix
Jika ada konflik dengan class lain dalam proyek, kita bisa menambahkan prefix ke semua class Tailwind.
@import "tailwindcss" prefix(tw);
Kemudian, semua class akan memiliki prefix:
<div class="tw:text-red-500">Text ini berwarna merah</div>
Ini berguna jika proyek sudah memiliki CSS lain yang bisa bentrok dengan Tailwind.
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
