Tailwind CSS · Utilities reference · all subjects

responsive-design

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

Viewport meta tag required for responsive design

The viewport meta tag must be added to the <head> of the HTML document for responsive utilities to work properly. The tag should be: <meta name="viewport" content="width=device-width, initial-scale=1.0" />

Responsive breakpoint prefix syntax

To apply a utility only at a specific breakpoint or larger, prefix the utility class with the breakpoint name followed by a colon. For example, md:w-32 applies the width utility only at medium screens and above.

Default breakpoints in Tailwind CSS

Tailwind CSS includes five default breakpoints: sm (40rem / 640px), md (48rem / 768px), lg (64rem / 1024px), xl (80rem / 1280px), and 2xl (96rem / 1536px). Each breakpoint is applied as a minimum-width media query using @media (width >= value).

Mobile-first approach in Tailwind CSS

Tailwind uses a mobile-first breakpoint system where unprefixed utilities apply to all screen sizes, and prefixed utilities only apply at that breakpoint and above. To style mobile, use unprefixed utilities; do not use the sm: prefix for mobile targeting. For example, use text-center for mobile and sm:text-left to override on larger screens.

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-lg:flex applies only between md and lg breakpoints. 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 only a single breakpoint, stack the responsive variant with the max-* variant for the next breakpoint. For example, md:max-lg:flex applies the flex utility only at the md breakpoint.

Customizing breakpoints with theme variables

Breakpoints are customized using --breakpoint-* theme variables in the @theme block of CSS. For example, --breakpoint-xs: 30rem creates a new xs breakpoint at 30rem. Always use the same unit (rem is recommended) for all breakpoints to ensure proper sorting and avoid utilities overriding each other unexpectedly.

Removing default breakpoints

To remove a default breakpoint, set its value to the initial keyword in the @theme block, for example --breakpoint-2xl: initial. To replace all default breakpoints entirely, use --breakpoint-*: initial to reset all breakpoints, then define custom breakpoints from scratch.

Arbitrary breakpoint values

Use the min and max variants to generate one-off breakpoints without adding them to the theme. For example, min-[320px]:text-center and max-[600px]:bg-sky-300 apply styles at arbitrary breakpoints.

Container queries with @container class

To use container queries, mark an element as a container using the @container class, then use variants like @sm and @md to style child elements based on container size. Container query variants are mobile-first, applying at the target container size and above.

Max-width container query variants

Use variants like @max-sm and @max-md to apply styles below a specific container size. These variants allow styling of elements when containers are smaller than a threshold.

Container query ranges

Stack a regular container query variant with a max-width variant to target a specific container size range. For example, @sm:@max-md:flex-col applies a style only when the container is between sm and md sizes.

Named containers in container queries

For complex designs with multiple nested containers, name containers using @container/{name} syntax and target specific containers with variants like @sm/{name} and @md/{name}. This allows styling based on distant containers rather than just the nearest one.

Size containers vs inline-size containers

By default, @container creates an inline-size container. Use @container-size to create a size container that measures block size, necessary when using container query length units like cqb that depend on block size. Size containers can also be named using @container-size/{name}.

Customizing container sizes with theme variables

Container sizes are customized using --container-* theme variables in the @theme block. For example, --container-8xl: 96rem adds a new 8xl container query variant. Custom container sizes can be used immediately in markup.

Arbitrary container query sizes

Use variants like @min-[475px] and @max-[960px] to create one-off container query sizes without adding them to the theme.

Container query length units as arbitrary values

Container query length units like cqw and cqi can be used as arbitrary values in other utility classes to reference container size. For example, w-[50cqw] sets width to 50% of the container's inline size. For units like cqb and cqh that depend on block size, use @container-size on the container.

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 generates a media query using @container (width >= value).

Responsive design example: stacked to side-by-side layout

Example showing responsive layout transformation. On mobile the outer div is display: block with a stacked layout. At md breakpoint, md:flex makes it a flex container for side-by-side layout. Use md:shrink-0 to prevent the image from shrinking on medium screens and up. Constrain image width with md:w-48 and ensure full height with md:h-full on larger screens.

Give your agent this brain