Konsep Inti: Menambahkan Gaya Kustom di Tailwind
Inti Utamanya:
Tailwind CSS dibuat agar bisa mudah diubah dan disesuaikan. Jadi, ketika kamu butuh sesuatu yang nggak disediakan langsung oleh Tailwind, kamu tetap bisa nambahin gaya (style) sendiri tanpa harus melawan cara kerja Tailwind.
1. Kustomisasi Tema
Kalau kamu pengen ganti warna, ukuran font, ukuran spasi, atau breakpoint, kamu bisa nambahkannya lewat CSS dengan @theme.
Contoh:
@theme {
--font-display: "Satoshi", "sans-serif";
--breakpoint-3xl: 120rem;
--color-avocado-100: oklch(0.99 0 0);
--color-avocado-200: oklch(0.98 0.04 113.22);
--color-avocado-300: oklch(0.94 0.11 115.03);
--color-avocado-400: oklch(0.92 0.19 114.08);
--color-avocado-500: oklch(0.84 0.18 117.33);
--color-avocado-600: oklch(0.53 0.12 118.34);
--ease-fluid: cubic-bezier(0.3, 0, 0, 1);
--ease-snappy: cubic-bezier(0.2, 0, 0, 1);
}<!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-lg font-[var(--font-display)] text-[var(--color-avocado-600)]">
Teks dengan font dan warna kustom
</div>
</body>
</html>berikut hasilnya:
2. Menggunakan Nilai Arbitrer (Arbitrary Values)
Kalau kamu butuh nilai yang nggak ada di Tailwind, misalnya top: 117px, kamu bisa tulis langsung dengan kurung siku [].
Contoh Dasar:
<!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="relative top-[117px] bg-blue-200 p-4">
Elemen ini punya jarak atas 117px
</div>
</body>
</html>berikut hasilnya:
Contoh dengan Responsive (lg:):
<!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="relative top-[117px] lg:top-[344px] bg-blue-300 p-4">
Top 117px di mobile, 344px di layar besar
</div>
</body>
</html>berikut hasilnya:
Contoh Background, Font, Pseudo Element:
<!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="bg-[#bada55] text-[22px] before:content-['Festivus'] p-4 relative before:absolute before:top-0">
Elemen dengan warna background dan font kustom, dan pseudo-element sebelum teks
</div>
</body>
</html>berikut hasilnya:
3. Menggunakan CSS Variable
Kalau kamu sudah punya CSS variable, kamu bisa pakai juga dengan format:
<style>
:root {
--my-brand-color: #ff5733;
}
</style>
<div class="fill-[--my-brand-color] w-10 h-10">
SVG atau elemen dengan warna isi dari variable
</div>
4. Arbitrary Properties
Kalau properti CSS yang kamu butuhkan nggak tersedia di Tailwind (misalnya mask-type), kamu bisa langsung tulis pakai kurung siku:
<!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="[mask-type:luminance] bg-gray-200 p-4">
Elemen ini pakai properti mask-type yang nggak disediakan oleh Tailwind
</div>
</body>
</html>berikut hasilnya:
Dengan Modifier (hover:):
<!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="[mask-type:luminance] hover:[mask-type:alpha] bg-gray-300 p-4">
Hover untuk ganti mask-type
</div>
</body>
</html>berikut hasilnya:
Dengan Variabel:
<!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="[--scroll-offset:56px] lg:[--scroll-offset:44px] p-4 bg-white">
Scroll offset berubah di ukuran layar besar
</div>
</body>
</html>berikut hasilnya:
5. Arbitrary Variants
Kalau kamu butuh variasi pseudo-class/selector yang nggak umum, kamu bisa pakai arbitrary variant:
Contoh:
<!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>
<ul role="list" class="space-y-2">
<li class="lg:[&:nth-child(-n+3)]:hover:underline">Item 1</li>
<li class="lg:[&:nth-child(-n+3)]:hover:underline">Item 2</li>
<li class="lg:[&:nth-child(-n+3)]:hover:underline">Item 3</li>
<li class="lg:[&:nth-child(-n+3)]:hover:underline">Item 4</li>
</ul>
</body>
</html>berikut hasilnya:
6. Mengatur Spasi dengan Underscore (_)
Kalau kamu butuh nilai CSS yang mengandung spasi (misalnya grid-template-columns: 1fr 500px 2fr), ubah spasi jadi _.
Contoh:
<!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="grid grid-cols-[1fr_500px_2fr] gap-4">
<div class="bg-red-200">1</div>
<div class="bg-green-200">2</div>
<div class="bg-blue-200">3</div>
</div>
</body>
</html>berikut hasilnya:
7. Gunakan Underscore di URL
Tailwind akan tetap menyimpan underscore di tempat-tempat seperti URL:
<!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="bg-[url('/what_a_rush.png')] h-64 bg-cover">
Background dengan nama file mengandung underscore
</div>
</body>
</html>berikut hasilnya:
Kalau Kamu Perlu Escape Underscore:
<!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="before:content-['hello\\_world'] relative before:absolute before:top-0">
Pseudo-element dengan underscore di teks
</div>
</body>
</html>berikut hasilnya:
Di JSX:
<div className={String.raw`before:content-['hello\_world']`}>
JSX version
</div>
8. Menyelesaikan Ambiguitas
Tailwind bisa membedakan text-[22px] sebagai ukuran font, dan text-[#bada55] sebagai warna. Tapi untuk variabel CSS, kamu bisa bantu Tailwind dengan menambahkan tipe datanya.
Contoh:
<!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>
<!-- Ukuran font -->
<div class="text-(length:--my-var)">
Font-size dari variabel
</div>
<!-- Warna -->
<div class="text-(color:--my-var)">
Warna teks dari variabel
</div>
</body>
</html>berikut hasilnya:
Artikel Lainnya Dengan Kategori Terkait :
1. Belajar Tailwind CSS # 110 Background-clip di Tailwind CSS
2. Belajar Tailwind CSS #01 Instalasi Tailwind CSS
3. Belajar Tailwind CSS #02 Editor Setup di Tailwind CSS
4. Belajar Tailwind CSS #03 Compatibility di Tailwind CSS
5. Belajar Tailwind CSS #04 Upgrade dari Tailwind CSS v3 ke v4
6. Belajar Tailwind CSS #05 Perubahan di Tailwind CSS v4 dengan v3
7. Belajar Tailwind CSS #06 Styling dengan Utility Classes part 1
8. Belajar Tailwind CSS #07 Styling dengan Utility Classes part 2
9. Belajar Tailwind CSS #08 Hover, fokus dan status lainnya part 1
10. Belajar Tailwind CSS #09 Hover, fokus, dan status lainnya part 2
11. Belajar Tailwind CSS #10 Hover, fokus, dan status lainnya part 3
12. Belajar Tailwind CSS #100 Text-overflow di Tailwind CSS
13. Belajar Tailwind CSS #101 Text-wrap di Tailwind CSS
14. Belajar Tailwind CSS #102 Text-indent di Tailwind CSS
15. Belajar Tailwind CSS #103 Vertical-align di Tailwind CSS
16. Belajar Tailwind CSS #104 White-space di Tailwind CSS
17. Belajar Tailwind CSS #105 Word-break di Tailwind CSS
18. Belajar Tailwind CSS #106 Overflow-wrap di Tailwind CSS
19. Belajar Tailwind CSS #107 Hyphens di Tailwind CSS
20. Belajar Tailwind CSS #108 Content di Tailwind CSS
21. Belajar Tailwind CSS #109 Background-attachment di Tailwind CSS
22. Belajar Tailwind CSS #11 Hover, fokus, dan status lainnya part 4
23. Belajar Tailwind CSS #12 Hover, fokus, dan status lainnya part 5
24. Belajar Tailwind CSS #13 Responsive design part 1
25. Belajar Tailwind CSS #14 Responsive design part 2
26. Belajar tailwind CSS #15 Responsive design part 3
27. Belajar Tailwind CSS #16 Dark Mode di Tailwind
28. Belajar Tailwind CSS #17 Theme Variables part 1
29. Belajar Tailwind CSS #18 Theme Variables part 2
30. Belajar Tailwind CSS #19 Theme Variables part 3
31. Belajar Tailwind CSS #20 Tailwind CSS - Colors part 1
32. Belajar Tailwind CSS #21 Tailwind - Colors part 2
33. Belajar Tailwind CSS #22 Adding custom styles part 1
34. Belajar Tailwind CSS #23 Adding custom styles part 2
35. Belajar Tailwind CSS #24 Adding custom styles part 3
36. Belajar Tailwind CSS #25 Detecting classes in soure files
37. Belajar Tailwind CSS #26 Functions and directives
38. Belajar Tailwind CSS #27 Preflight Tailwind CSS
39. Belajar Tailwind CSS #28 Aspect-Ratio Tailwind CSS
40. Belajar Tailwind CSS #29 Tailwind CSS columns
41. Belajar Tailwind CSS #30 Tailwind CSS Break-After
42. Belajar Tailwind CSS #31 Tailwind CSS Break-Before
43. Belajar Tailwind CSS #32 Break-Inside Tailwind CSS
44. Belajar Tailwind CSS #33 Box Decoration Break Tailwind CSS
45. Belajar Tailwind CSS #34 Box Sizing Tailwind CSS
46. Belajar Tailwind CSS #35 Tailwind CSS Display
47. Belajar Tailwind CSS #36 Tailwind CSS Float
48. Belajar tailwind CSS #37 Tailwind CSS Clear
49. Belajar Tailwind CSS #38 Tailwind CSS Isolation
50. Belajar Tailwind CSS #39 Tailwind CSS Object-fit
51. Belajar Tailwind CSS #40 Tailwind CSS Object-position
52. Belajar Tailwind CSS #41 Overflow Tailwind CSS
53. Belajar Tailwind CSS #42 Tailwind CSS overscroll-behavior
54. Belajar Tailwind CSS #43 Tailwind CSS Position
55. Belajar Tailwind CSS #44 Tailwind CSS top,right,bottom,left
56. Belajar Tailwind CSS #45 Visibility di Tailwind CSS
57. Belajar Tailwind CSS #46 Z-index di Tailwind CSS
58. Belajar Tailwind CSS #47 Tailwind CSS flex-basis
59. Belajar Tailwind CSS #48 Flex-direction Tailwind CSS
60. Belajar Tailwind CSS #49 Flex-wrap Tailwind CSS
61. Belajar Tailwind CSS #50 Flex Tailwind CSS
62. Belajar Tailwind CSS #51 Flex-grow Tailwind CSS
63. Belajar Tailwind CSS #52 Flex-shrink Tailwind CSS
64. Belajar Tailwind CSS #53 Tailwind CSS order
65. Belajar Tailwind CSS #54 Grid-template-columns Tailwind CSS
66. Belajar Tailwind CSS #55 Grid-column Tailwind CSS
67. Belajar Tailwind CSS #56 Grid-template-rows Tailwind CSS
68. Belajar Tailwind CSS #57 Grid-row Tailwind CSS
69. Belajar Tailwind CSS #58 Grid-auto-flow Tailwind CSS
70. Belajar Tailwind CSS #59 Grid-auto-columns Tailwind CSS
71. Belajar Tailwind CSS #60 Grid-auto-rows Tailwind CSS
72. Belajar Tailwind CSS #61 Gap di Tailwind CSS
73. Belajar Tailwind CSS #62 Justify-content di Tailwind CSS
74. Belajar Tailwind CSS #63 Justify-items di Tailwind CSS
75. Belajar Tailwind CSS #64 Justify-self di Tailwind CSS
76. Belajar Tailwind CSS #65 Align-content di Tailwind CSS
77. Belajar Tailwind CSS #66 Align-items di Tailwind CSS
78. Belajar Tailwind CSS #67 Align-self di Tailwind CSS
79. Belajar Tailwind CSS #68 Place-content di Tailwind CSS
80. Belajar Tailwind CSS #69 Tailwind CSS place-items
81. Belajar Tailwind CSS #70 Tailwind CSS place-self
82. Belajar Tailwind CSS #71 Padding di Tailwind CSS
83. Belajar Tailwind CSS #72 Margin di Tailwind CSS
84. Belajar Tailwind CSS #73 Width di Tailwind CSS
85. Belajar Tailwind CSS #74 Min-width di Tailwind CSS
86. Belajar Tailwind CSS #75 Max-width di Tailwind CSS
87. Belajar Tailwind CSS #76 Height di Tailwind CSS
88. Belajar Tailwind CSS #77 Min-height di Tailwind CSS
89. Belajar Tailwind CSS #78 Max-height di Tailwind CSS
90. Belajar Tailwind CSS #79 Font-family di Tailwind CSS
91. Belajar Tailwind CSS #80 Font-size di Tailwind CSS
92. Belajar Tailwind CSS #81 Font-smoothing di Tailwind CSS
93. Belajar tailwind CSS #82 Font-style di Tailwind CSS
94. Belajar Tailwind CSS #83 Font-weight di Tailwind CSS
95. Belajar Tailwind CSS #84 Font-stretch di Tailwind CSS
96. Belajar Tailwind CSS #85 Font-variant-numeric di Tailwind CSS
97. Belajar Tailwind CSS #86 Letter-spacing di Tailwind CSS
98. Belajar Tailwind CSS #87 Line-clamp di Tailwind CSS
99. Belajar Tailwind CSS #88 Line-height di Tailwind CSS
100. Belajar Tailwind CSS #89 List-style-image di Tailwind CSS
101. Belajar Tailwind CSS #90 List-style-position di Tailwind CSS
102. Belajar Tailwind CSS #91 List-style-type di Tailwind CSS
103. Belajar Tailwind CSS #92 Text-align di Tailwind CSS
104. Belajar Tailwind CSS #93 Color di Tailwind CSS
105. Belajar Tailwind CSS #94 Text-decoration-line di Tailwind CSS
106. Belajar Tailwind CSS #95 Text-decoration-color di Tailwind CSS
107. Belajar Tailwind CSS #96 Text-decoration-style di Tailwind CSS
108. Belajar Tailwind CSS #97 Text-decoration-thickness di Tailwind CSS
109. Belajar Tailwind CSS #98 Text-decoration-offset di Tailwind CSS
110. Belajar Tailwind CSS #99 Text-transform di Tailwind CSS
