Custom variants

Breakpoint modifiers, the breakpoint-range variants (`mm-*`, `minmax-*`) and the `:is()` variants.

Breakpoint modifiers apply from a min width upward. mm-<breakpoint>: (alias of minmax-<breakpoint>:) applies only between a breakpoint and the next one. The is-[…] variants wrap a class in :is().

Variant	Applies	Note
`sm:`	`@media (width >= 0px)`
`md:`	`@media (width >= 640px)`
`lg:`	`@media (width >= 1192px)`
`xl:`	`@media (width >= 1366px)`
`2xl:`	`@media (width >= 1728px)`
`3xl:`	`@media (width >= 2048px)`
`mm-sm:`	`@media (max-width: 639px)`
`mm-md:`	`@media (min-width: 640px) and (max-width: 1191px)`
`mm-lg:`	`@media (min-width: 1192px) and (max-width: 1365px)`
`mm-xl:`	`@media (min-width: 1366px) and (max-width: 1727px)`
`mm-2xl:`	`@media (min-width: 1728px) and (max-width: 2047px)`
`mm-3xl:`	`@media (min-width: 2048px)`
`minmax-sm:`	`@media (max-width: 639px)`
`minmax-md:`	`@media (min-width: 640px) and (max-width: 1191px)`
`minmax-lg:`	`@media (min-width: 1192px) and (max-width: 1365px)`
`minmax-xl:`	`@media (min-width: 1366px) and (max-width: 1727px)`
`minmax-2xl:`	`@media (min-width: 1728px) and (max-width: 2047px)`
`minmax-3xl:`	`@media (min-width: 2048px)`
`mm-md/xl:`	`@media (min-width: 640px) and (max-width: 1365px)`	A `/<breakpoint>` modifier sets the upper bound.
`is-[.active]:`	`&:is(.active)`	The element matches the selector in brackets.
`group-is-[.active]:`	`&:is(:where(.group):is(.active) *)`	The closest `group` ancestor matches the selector.
`peer-is-[:checked]:`	`&:is(:where(.peer):is(:checked) ~ *)`	A preceding `peer` sibling matches the selector.