Menambahkan Custom Utilities di Tailwind CSS
1. Utility Sederhana
Kalau Tailwind belum menyediakan utility yang kamu butuhkan, kamu bisa bikin sendiri pakai @utility.
Contoh:
@utility content-auto {
content-visibility: auto;
}
Lalu pakai seperti biasa di HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Adding custom styles</title>
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="app.css">
</head>
<body>
<div class="content-auto">Konten dengan visibilitas otomatis</div>
<div class="hover:content-auto">Akan aktif saat hover</div>
</body>
</html>
berikut hasilnya:
2. Utility Lebih Kompleks
Kalau utility-nya lebih dari satu baris CSS (misalnya pseudo-element atau scrollbar), kamu bisa pakai nesting:
@utility scrollbar-hidden {
&::-webkit-scrollbar {
display: none;
}
}
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Adding custom styles</title>
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="app.css">
</head>
<body>
<div class="scrollbar-hidden overflow-auto max-h-60">...</div>
</body>
</html>
berikut hasilnya:
3. Utility Fungsional (Function-style)
Kamu bisa bikin utility yang menerima parameter/value. Misalnya:
@utility tab-* {
tab-size: --value(--tab-size-*);
}
Gunakan ini bersama @theme:
@theme {
--tab-size-2: 2;
--tab-size-4: 4;
--tab-size-github: 8;
}
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Adding custom styles</title>
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="app.css">
</head>
<body>
<pre class="tab-2">Tab size 2</pre>
<pre class="tab-github">Tab size GitHub (8)</pre>
</body>
</html>
berikut hasilnya:
4. Value Langsung (Bare Value)
Kalau nggak mau pakai @theme, kamu bisa langsung pakai tipe data:
@utility tab-* {
tab-size: --value(integer);
}
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Adding custom styles</title>
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="app.css">
</head>
<body>
<pre class="tab-4">Ukuran tab 4 (tanpa theme)</pre>
</body>
</html>
berikut hasilnya:
5. Value Arbitrary (Nilai Bebas)
Mendukung nilai fleksibel seperti tab-[6]:
@utility tab-* {
tab-size: --value([integer]);
}
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Adding custom styles</title>
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="app.css">
</head>
<body>
<pre class="tab-[6]">Tab 6 dengan nilai arbitrary</pre>
</body>
</html>
berikut hasilnya:
6. Kombinasi Theme, Bare, dan Arbitrary
Bisa digabung semua jadi satu utility:
@utility tab-* {
tab-size: --value([integer]);
tab-size: --value(integer);
tab-size: --value(--tab-size-*);
}
Contoh kompleks (opacity):
@utility opacity-* {
opacity: --value([percentage]);
opacity: calc(--value(integer) * 1%);
opacity: --value(--opacity-*);
}
7. Nilai Negatif
Untuk membuat utility negatif, tinggal tambahkan prefix -:
@utility inset-* {
inset: calc(var(--spacing) * --value([percentage], [length]));
}
@utility -inset-* {
inset: calc(var(--spacing) * --value([percentage], [length]) * -1);
}
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Adding custom styles</title>
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="app.css">
</head>
<body>
<div class="inset-[10px]">Positif</div>
<div class="-inset-[10px]">Negatif</div>
</body>
</html>
berikut hasilnya:
8. Modifier (Seperti line-height di font-size)
Kalau kamu ingin modifikasi dengan nilai tambahan:
@utility text-* {
font-size: --value(--text-*, [length]);
line-height: --modifier(--leading-*, [length], [*]);
}
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Adding custom styles</title>
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="app.css">
</head>
<body>
<div class="text-xl/loose">Font XL dengan line-height "loose"</div>
</body>
</html>
berikut hasilnya:
9. Mendukung Fraksi
Contoh untuk aspect-ratio:
@utility aspect-* {
aspect-ratio: --value(--aspect-ratio-*, ratio, [ratio]);
}
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Adding custom styles</title>
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="app.css">
</head>
<body>
<div class="aspect-3/4">...</div>
<div class="aspect-square">...</div>
<div class="aspect-[16/9]">...</div>
</body>
</html>
berikut hasilnya:
10. Menambahkan Custom Variant
Kalau kamu ingin bikin variant kustom seperti theme-midnight, gunakan @custom-variant:
@custom-variant theme-midnight {
&:where([data-theme="midnight"] *) {
@slot;
}
}
HTML:
<html data-theme="midnight">
<button class="theme-midnight:bg-black text-white">Mode Malam</button>
</html>
berikut hasilnya:
Bisa juga pakai versi singkat:
@custom-variant theme-midnight (&:where([data-theme="midnight"] *));
Nested Variant:
@custom-variant any-hover {
@media (any-hover: hover) {
&:hover {
@slot;
}
}
}
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Adding custom styles</title>
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="app.css">
</head>
<body>
<button class="any-hover:bg-blue-500">Hover saat memungkinkan</button>
</body>
</html>
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
