Tokens & namespaces
Breakpoints
Named breakpoints conditions in the current preset.
Conditions
These thresholds come from the current preset. Breakpoints have named entrances; container thresholds use complete native queries. Project theme tokens can override the values.
Append a condition such as @md to a class. It measures the viewport width, independently of a component’s available width. Each example below shows the complete generated CSS for an opacity class at that threshold.
4xs
@layer utilities { @media (width>=22.5rem) { .opacity\:1\@4xs { opacity: 1 } }}3xs
@layer utilities { @media (width>=30rem) { .opacity\:1\@3xs { opacity: 1 } }}2xs
@layer utilities { @media (width>=37.5rem) { .opacity\:1\@2xs { opacity: 1 } }}xs
@layer utilities { @media (width>=48rem) { .opacity\:1\@xs { opacity: 1 } }}sm
@layer utilities { @media (width>=52.125rem) { .opacity\:1\@sm { opacity: 1 } }}md
@layer utilities { @media (width>=64rem) { .opacity\:1\@md { opacity: 1 } }}lg
@layer utilities { @media (width>=80rem) { .opacity\:1\@lg { opacity: 1 } }}xl
@layer utilities { @media (width>=90rem) { .opacity\:1\@xl { opacity: 1 } }}2xl
@layer utilities { @media (width>=100rem) { .opacity\:1\@2xl { opacity: 1 } }}3xl
@layer utilities { @media (width>=120rem) { .opacity\:1\@3xl { opacity: 1 } }}4xl
@layer utilities { @media (width>=160rem) { .opacity\:1\@4xl { opacity: 1 } }}See conditions for syntax and composition, or the breakpoints guide for working examples.