Core Concepts

Responsive and adaptive design

Change styles based on device and viewport.

Overview

Every Sfumato utility class can be applied conditionally at different media breakpoints, which makes it easy to build responsive interfaces right in your HTML.

To ensure things work across breakpoints (e.g. on mobile), make sure you've configured the viewport meta tag in the <head> block of your document:

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

To add a style that only takes effect at a specific breakpoint, just prefix the utility name with the breakpoint name, followed by a colon:

<div class="block md:hidden ...">
    Only visible on mobile!
</div>

@media (width >= 48rem) {
    .md\:hidden {
        display: none;
    }
}

These work for every utility class in the Sfumato framework, which means you can change any styles at a given breakpoint.

Media & feature queries

Viewport width breakpoints

There are five default breakpoints with width values representing common device resolutions:

Breakpoint Target size 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) {...}

Viewport width ranges

Styles applied by rules like md:grid-cols-3 will apply at that breakpoint and stay applied at wider breakpoints.

If you need to apply a utility for a specific breakpoint range, stack a responsive variant like md with a max-* variant to limit that style to a specific range:

<div class="hidden md:max-lg:block ...">
    Only visible on tablets!
</div>

@media (width >= 48rem) and (width < 64rem) {
    .md\:max-lg\:block {
        display: block;
    }
}

Adaptive queries

There are seven default adaptive breakpoints with aspect-ratio values representing common device aspect ratios, for more specific targeting:

Breakpoint Target size CSS

mobi

mobile phones

@media (min-aspect-ratio: 0.6249) {...}

phab

phablets

@media (min-aspect-ratio: 0.575) {...}

tabp

tablets (portrait)

@media (min-aspect-ratio: 0.625) {...}

tabl

tablets (landscape)

@media (min-aspect-ratio: 1.0) {...}

desk

desktops

@media (min-aspect-ratio: 1.5) {...}

wide

wide screens

@media (min-aspect-ratio: 1.7777) {...}

vast

ultrawide screens

@media (min-aspect-ratio: 2.3333) {...}

Container queries

Container queries are a newer addition to CSS that allow you to apply styles depending on the dimensions of a parent element rather than the whole browser window. This means you can create components that adapt their appearance to the specific space they occupy, making them more flexible and easier to reuse in different layouts.

<div class="@container">
    <div class="grid @md:grid-cols-3">
        <!-- ... -->
    </div>
</div>

You can also name your containers for more specific targeting, like when nested.

<div class="@container/main">
    <div class="grid @md/main:grid-cols-3">
        <!-- ... -->
    </div>
</div>

Base container sizes

Breakpoint Target size CSS

@3xs

16rem (~256px)

@container (width >= 16rem) {...}

@2xs

18rem (~288px)

@container (width >= 18rem) {...}

@xs

20rem (~320px)

@container (width >= 20rem) {...}

@sm

24rem (~384px)

@container (width >= 24rem) {...}

@md

28rem (~448px)

@container (width >= 28rem) {...}

@lg

32rem (~512px)

@container (width >= 32rem) {...}

@xl

36rem (~576px)

@container (width >= 36rem) {...}

@2xl

42rem (~672px)

@container (width >= 42rem) {...}

@3xl

48rem (~768px)

@container (width >= 48rem) {...}

@4xl

56rem (~896px)

@container (width >= 56rem) {...}

@5xl

64rem (~1024px)

@container (width >= 64rem) {...}

@6xl

72rem (~1152px)

@container (width >= 72rem) {...}

@7xl

80rem (~1280px)

@container (width >= 80rem) {...}

Container ranges queries

Container queries can also be specified with ranges:

<div class="@container ...">
    <div class="@sm:@max-lg:bg-fuchsia-500 ...">
        <!-- ... -->
    </div>
</div>

@container (width >= 24rem) and (width < 32rem) {
    .\@sm\:\@max-lg\:bg-fuchsia-500 {
        background-color: var(--color-fuchsia-500);
    }
}

@supports

The supports-[...] variant is used to style elements based on whether a certain feature is supported in the user's browser.

Breakpoint CSS

supports-[...]

@supports (...) {...}

supports-backdrop-blur

@supports ((-webkit-backdrop-filter:blur(0)) or (backdrop-filter:blur(0))) or (-webkit-backdrop-filter:blur(0)) {...}

not-supports-[...]

@supports not (...) {...}

@starting-style

Use the starting variant to set the style of an element when it is first rendered in the DOM, or transitions from display: none to visible:

Breakpoint CSS

starting

@starting-style {...}

Custom variants

Using arbitrary variants

Similar to arbitrary values, arbitrary variants let you create custom selector variants.

Arbitrary variants are simply formatted strings that represent the selector, wrapped in square brackets.

<a href="#" class="[@media(width_<_1024px)]:text-sm">Learn more</a>

You can also use at-rules like @supports in arbitrary variants:

<a href="#" class="[@supports(transform:scale(1.25)]:scale-[1.25]">Learn more</a>

Create a custom variant

For times when you're using the same arbitrary variant more than once, you should consider creating a custom variant using the @custom-variant directive:

@layer sfumato {
    ...
    @custom-variant supports-scale (@supports(transform:scale(1.25)));
    ...
    @custom-variant new-hover (&:hover:not(:focus):not(:active));
}

Quick Reference

All media queries

Following are all available standard @media query variants, including max varieties:

Breakpoint Target size CSS

sm

40rem (~640px)

@media (width >= 40rem) {...}

max-sm

40rem (~640px)

@media (width < 40rem) {...}

md

48rem (~768px)

@media (width >= 48rem) {...}

max-md

48rem (~768px)

@media (width < 48rem) {...}

lg

64rem (~1024px)

@media (width >= 64rem) {...}

max-lg

64rem (~1024px)

@media (width < 64rem) {...}

xl

80rem (~1280px)

@media (width >= 80rem) {...}

max-xl

80rem (~1280px)

@media (width < 80rem) {...}

2xl

96rem (~1536px)

@media (width >= 96rem) {...}

max-2xl

96rem (~1536px)

@media (width < 96rem) {...}

min-*

@media (width >= 1024px) {...}

max-*

@media (width < 1024px) {...}

pointer-fine

@media (pointer: fine) {...}

pointer-coarse

@media (pointer: coarse) {...}

pointer-none

@media (pointer: none) {...}

any-pointer-fine

@media (any-pointer: fine) {...}

any-pointer-coarse

@media (any-pointer: coarse) {...}

any-pointer-none

@media (any-pointer: none) {...}

noscript

@media (scripting: none) {...}

motion-safe

@media (prefers-reduced-motion: no-preference) {...}

motion-reduced

@media (prefers-reduced-motion: reduce) {...}

portrait

@media (orientation: portrait) {...}

landscape

@media (orientation: landscape) {...}

print

@media print {...}

dark

@media (prefers-color-scheme: dark) {...}

All adaptive queries

Following are all available adaptive design @media query variants, including max varieties:

Breakpoint Target size CSS

mobi

mobile phones

@media (min-aspect-ratio: 0.6249) {...}

max-mobi

mobile phones

@media (max-aspect-ratio: 0.6248) {...}

phab

phablets

@media (min-aspect-ratio: 0.575) {...}

max-phab

mobile phones

@media (max-aspect-ratio: 0.5749) {...}

tabp

tablets (portrait)

@media (min-aspect-ratio: 0.625) {...}

max-tabp

mobile phones

@media (max-aspect-ratio: 0.6249) {...}

tabl

tablets (landscape)

@media (min-aspect-ratio: 1.0) {...}

max-tabl

mobile phones

@media (max-aspect-ratio: 0.9999) {...}

desk

desktops

@media (min-aspect-ratio: 1.5) {...}

max-desk

mobile phones

@media (max-aspect-ratio: 1.4999) {...}

wide

wide screens

@media (min-aspect-ratio: 1.7777) {...}

max-wide

mobile phones

@media (max-aspect-ratio: 1.7776) {...}

vast

ultrawide screens

@media (min-aspect-ratio: 2.3333) {...}

max-vast

mobile phones

@media (max-aspect-ratio: 2.3331999999999997) {...}

All container queries

Following are all available @container query variants, including max varieties:

Breakpoint Target size CSS

@3xs

16rem (~256px)

@container (width >= 16rem) {...}

@max-3xs

16rem (~256px)

@container (width < 16rem) {...}

@2xs

18rem (~288px)

@container (width >= 18rem) {...}

@max-2xs

18rem (~288px)

@container (width < 18rem) {...}

@xs

20rem (~320px)

@container (width >= 20rem) {...}

@max-xs

20rem (~320px)

@container (width < 20rem) {...}

@sm

24rem (~384px)

@container (width >= 24rem) {...}

@max-sm

24rem (~384px)

@container (width < 24rem) {...}

@md

28rem (~448px)

@container (width >= 28rem) {...}

@max-md

28rem (~448px)

@container (width < 28rem) {...}

@lg

32rem (~512px)

@container (width >= 32rem) {...}

@max-lg

32rem (~512px)

@container (width < 32rem) {...}

@xl

36rem (~576px)

@container (width >= 36rem) {...}

@max-xl

36rem (~576px)

@container (width < 36rem) {...}

@2xl

42rem (~672px)

@container (width >= 42rem) {...}

@max-2xl

42rem (~672px)

@container (width < 42rem) {...}

@3xl

48rem (~768px)

@container (width >= 48rem) {...}

@max-3xl

48rem (~768px)

@container (width < 48rem) {...}

@4xl

56rem (~896px)

@container (width >= 56rem) {...}

@max-4xl

56rem (~896px)

@container (width < 56rem) {...}

@5xl

64rem (~1024px)

@container (width >= 64rem) {...}

@max-5xl

64rem (~1024px)

@container (width < 64rem) {...}

@6xl

72rem (~1152px)

@container (width >= 72rem) {...}

@max-6xl

72rem (~1152px)

@container (width < 72rem) {...}

@7xl

80rem (~1280px)

@container (width >= 80rem) {...}

@max-7xl

80rem (~1280px)

@container (width < 80rem) {...}

Hover and other states

Dark theme

Core Concepts

Responsive and adaptive design

Overview

Media & feature queries

Viewport width breakpoints

Viewport width ranges

Adaptive queries

Container queries

Base container sizes

Container ranges queries

@supports

@starting-style

Custom variants

Using arbitrary variants

Create a custom variant

Quick Reference

All media queries

All adaptive queries

All container queries

Sfumato

Community