utilities/responsive

14 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.

Default breakpoints in Tailwind CSS v4

Tailwind CSS v4 includes five default breakpoints: sm at 40rem (640px), md at 48rem (768px), lg at 64rem (1024px), xl at 80rem (1280px), and 2xl at 96rem (1536px). Each breakpoint uses a @media (width >= value) query.

Responsive utility prefix syntax

To apply a utility at a specific breakpoint, prefix the utility class with the breakpoint name followed by a colon, such as md:w-32 or lg:w-48. Every utility class in Tailwind can be applied conditionally at different breakpoints.

Mobile-first breakpoint system

Tailwind CSS v4 uses a mobile-first breakpoint system. Unprefixed utilities like uppercase take effect on all screen sizes. Prefixed utilities like md:uppercase only take effect at the specified breakpoint and above. To style something for mobile, use the unprefixed version of a utility, not the sm: prefixed version.

Targeting breakpoint ranges with max-* variants

To apply a utility only within a specific breakpoint range, stack a responsive variant with a max-* variant. For example, md:max-xl:flex applies only between md and xl. The available max-* variants are max-sm (@media (width < 40rem)), max-md (@media (width < 48rem)), max-lg (@media (width < 64rem)), max-xl (@media (width < 80rem)), and max-2xl (@media (width < 96rem)).

Targeting a single breakpoint

To target a single breakpoint, stack the responsive variant with the max-* variant for the next breakpoint. For example, md:max-lg:flex targets only the md breakpoint range.

Breakpoint units must be consistent

When customizing breakpoints, always use the same unit for defining all breakpoints, or the generated utilities may be sorted in an unexpected order. Tailwind uses rem for default breakpoints, so when adding additional breakpoints to the defaults, use rem as well.

Container queries markup syntax

Use the @container class to mark an element as an inline-size container. Then use variants like @sm and @md to style child elements based on the container size. Example: <div class="@container"><div class="flex flex-col @md:flex-row"></div></div>

Max-width container query variants

Use container query variants like @max-sm and @max-md to apply a style below a specific container size.

Container query ranges

Stack a regular container query variant with a max-width container query variant to target a specific range. Example: @sm:@max-md:flex-col applies styles only within that container size range.

Named containers syntax

For complex designs with multiple nested containers, name containers using @container/{name} and target specific containers with variants like @sm/{name} and @md/{name}. Example: <div class="@container/main"><div class="flex flex-row @sm/main:flex-col"></div></div>

Container size vs inline-size containers

Use @container-size to mark an element as a size container instead of an inline-size container when you need to use container query length units that depend on block size, such as cqb. You can also name size containers using @container-size/{name}.

Container query length units

Use container query length units like cqw and cqi as arbitrary values in other utility classes to reference the container size. For example, w-[50cqw]. For units like cqb and cqh that need more than inline size, use @container-size to make the full size available.

Default container query sizes reference

Tailwind includes 13 default container sizes: @3xs (16rem/256px), @2xs (18rem/288px), @xs (20rem/320px), @sm (24rem/384px), @md (28rem/448px), @lg (32rem/512px), @xl (36rem/576px), @2xl (42rem/672px), @3xl (48rem/768px), @4xl (56rem/896px), @5xl (64rem/1024px), @6xl (72rem/1152px), @7xl (80rem/1280px). Each uses @container (width >= value).

Viewport meta tag requirement

To use responsive utilities in Tailwind CSS, add the viewport meta tag to the <head> of your HTML document: <meta name="viewport" content="width=device-width, initial-scale=1.0" />

Give your agent this brain