styles

Layout

Breakpoints and containers decide how a page adapts from a phone to a wide screen.

--ds-screen-* (breakpoints, used by the sm:… prefixes) and --ds-container-* (used by tw-max-w-*).

Breakpoints

  • 576px
    sm576px
    --ds-screen-smsm:
  • 768px
    md768px
    --ds-screen-mdmd:
  • 992px
    lg992px
    --ds-screen-lglg:
  • 1200px
    xl1200px
    --ds-screen-xlxl:
  • 1400px
    2xl1400px
    --ds-screen-2xl2xl:

Containers

  • 1280px
    xl1280px
    --ds-container-xltw-max-w-xl