Tailwind mendukung arbitrary values untuk nilai di luar skala bawaan:
<div class="w-[137px] h-[42px] bg-[#1da1f2] text-[13px]">
Custom values
</div>
Arbitrary properties:
<div class="[mask-type:luminance]">Custom CSS property</div>
Arbitrary variants:
<li class="[&:nth-child(3)]:underline">Item ketiga</li>
@apply (di file CSS):
.btn-primary {
@apply bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600;
}
Theme extend (tailwind.config.js):
module.exports = {
theme: {
extend: {
colors: {
brand: "#1da1f2",
},
spacing: {
18: "72px",
},
},
},
};
Tips: Gunakan arbitrary values sebagai escape hatch, bukan sebagai kebiasaan. Kalau sering pakai nilai yang sama, extend theme.