Custom Values — Tailwind CSS

Tailwind mendukung arbitrary values untuk nilai di luar skala bawaan: Custom values Arbitrary properties: Custom CSS property Arbitrary variants: Item ketiga @a

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.

Yang akan kamu pelajari