---
title: "Custom variants"
description: "Breakpoint modifiers, the breakpoint-range variants (`mm-*`, `minmax-*`) and the `:is()` variants."
url: https://docs.systhema.app/next/reference/utilities/variants
version: unreleased (main)
docs_index: https://docs.systhema.app/next/llms.txt
---

<!-- generated by pnpm docs:generate; do not edit -->

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.   |