Using responsive utility variants to build adaptive user interfaces.
2023-03-18
Written by: tdtc
| Breakpoint prefix | Minimum width | CSS |
|---|---|---|
| sm | 40rem (640px) | @media (width >= 40rem) { … } |
| md | 48rem (768px) | @media (width >= 48rem) { … } |
| lg | 64rem (1024px) | @media (width >= 64rem) { … } |
| xl | 80rem (1280px) | @media (width >= 80rem) { … } |
| 2xl | 96rem (1536px) | @media (width >= 96rem) { … } |
| bootstrap | Tailwind |
|---|---|
| width: 100%; | w-full |
| —bs-gutter-x: 1.5rem; padding-right: calc(var(—bs-gutter-x) * .5); padding-left: calc(var(—bs-gutter-x) * .5); | px-3 |
| margin-right: auto; margin-left: auto; | mx-auto |
| bootstrap | Tailwind |
|---|---|
| container | w-full px-3 mx-auto sm:max-w-sm md:max-w-md lg:max-w-lg xl:max-w-xl xxl:max-w-xxl |
| container-sm | w-full px-3 mx-auto sm:max-w-sm md:max-w-md lg:max-w-lg xl:max-w-xl xxl:max-w-xxl |
| container-md | w-full px-3 mx-auto md:max-w-md lg:max-w-lg xl:max-w-xl xxl:max-w-xxl |
| container-lg | w-full px-3 mx-auto lg:max-w-lg xl:max-w-xl xxl:max-w-xxl |
| container-xl | w-full px-3 mx-auto xl:max-w-xl xxl:max-w-xxl |
| container-xxl | w-full px-3 mx-auto xxl:max-w-xxl |
| container-fluid | w-full px-3 mx-auto |
‘@container’ is a w3c standard:
container-type: inline-size;