@theme breakpointmin-[475px]:CSS-first

Custom Breakpoints

Menambah atau menimpa breakpoint lewat @theme CSS-first dan breakpoint arbitrary satu-off.

CSS-first dengan @theme

v4 menggantikan tailwind.config.js dengan @theme di CSS. Menambah --breakpoint-3xl langsung memunculkan utility 3xl:. Menimpa token dengan none menghapus breakpoint bawaan — semua tanpa file config.

css

@theme {
	/* menambah breakpoint baru */
	--breakpoint-3xl: 120rem;

	/* menghapus breakpoint bawaan
	--breakpoint-xs: none; */
}

Arbitrary breakpoint satu-off

Untuk nilai unik yang tak layak jadi token, pakai nilai arbitrary: min-[475px]:flex atau max-[600px]:hidden. Ini hanya sekali pakai — kalau polanya berulang, jadikan breakpoint resmi di @theme.

html

<div class="hidden min-[475px]:flex">Tampil di atas 475px</div>

Decision Rule

One-off → arbitrary value. Reusable design token → @theme.