Meta tags:
description= Using responsive utility variants to build adaptive user interfaces.;
Headings (most frequently used words):
container, using, tailwind, queries, targeting, mobile, custom, breakpoints, breakpoint, arbitrary, values, query, containers, size, css, resources, plus, community, responsive, design, overview, working, first, getting, started, core, concepts, base, styles, layout, flexbox, grid, spacing, sizing, typography, backgrounds, borders, effects, filters, tables, transitions, animation, transforms, interactivity, svg, accessibility, screens, range, single, customizing, your, theme, removing, default, what, are, basic, example, max, width, ranges, named, sizes, units, reference, on, this, page,
Text of the page (most frequently used words):
container (63), the (57), div (55), width (40), breakpoint (35), class (35), size (33), flex (31), and (28), max (26), text (22), that (19), use (19), using (18), screens (18), theme (17), you (17), your (16), like (16), html (16), #breakpoints (15), for (15), style (14), #default (13), tailwind (12), this (12), css (11), query (11), mobile (11), variant (11), grid (11), media (11), utility (10), font (10), color (10), rem (9), name (9), responsive (9), mask (9), background (9), containers (8), queries (8), are (8), 2xl (8), min (8), variants (8), can (8), documentation (7), sizes (7), arbitrary (7), targeting (7), more (7), make (7), row (7), target (7), align (7), custom (6), values (6), range (6), first (6), other (6), 80rem (6), inline (6), full (6), col (6), block (6), with (6), only (6), image (6), scroll (6), border (6), units (5), example (5), mode (5), 64rem (5), 48rem (5), need (5), learn (5), used (5), specific (5), center (5), initial (5), larger (5), layout (5), design (5), small (5), take (5), medium (5), height (5), content (5), transition (5), position (5), break (5), decoration (5), what (4), customizing (4), 3xl (4), classes (4), about (4), tailwindcss (4), import (4), app (4), based (4), just (4), apply (4), then (4), all (4), utilities (4), 96rem (4), box (4), styles (4), will (4), but (4), shrink (4), list (4), auto (4), overflow (4), shadow (4), spacing (4), core (4), concepts (4), transform (4), origin (4), outline (4), community (3), kit (3), templates (3), plus (3), showcase (3), blog (3), playground (3), reference (3), ranges (3), removing (3), single (3), hover (3), 1280px (3), 16rem (3), available (3), one (3), don (3), 8xl (3), new (3), variables (3), customize (3), element (3), instead (3), when (3), something (3), viewport (3), build (3), change (3), component (3), value (3), uses (3), adding (3), sure (3), 40rem (3), applied (3), left (3), 640px (3), unprefixed (3), effect (3), uppercase (3), have (3), display (3), img (3), object (3), side (3), snap (3), type (3), scrollbar (3), behavior (3), sizing (3), rotate (3), wrap (3), line (3), place (3), self (3), items (3), justify (3), columns (3), discord (2), github (2), hero (2), patterns (2), heroicons (2), headless (2), refactoring (2), resources (2), blocks (2), sponsor (2), named (2), basic (2), working (2), overview (2), page (2), dark (2), focus (2), states (2), 72rem (2), 1024px (2), 56rem (2), 768px (2), 42rem (2), 36rem (2), 32rem (2), 28rem (2), 24rem (2), 20rem (2), 320px (2), 18rem (2), 256px (2), minimum (2), from (2), than (2), cqb (2), length (2), 475px (2), off (2), want (2), add (2), markup (2), also (2), mark (2), makes (2), main (2), complex (2), stack (2), modern (2), feature (2), let (2), parent (2), they (2), components (2), space (2), sense (2), any (2), reset (2), well (2), unexpected (2), order (2), override (2), each (2), cols (2), often (2), good (2), idea (2), followed (2), wider (2), not (2), version (2), prefixed (2), think (2), means (2), above (2), could (2), added (2), since (2), clear (2), here (2), works (2), team (2), 500 (2), underline (2), building (2), src (2), white (2), which (2), letter (2), cursor (2), every (2), prefix (2), device (2), scale (2), meta (2), index (2), interfaces (2), user (2), stroke (2), padding (2), margin (2), perspective (2), visibility (2), animation (2), sepia (2), saturate (2), opacity (2), invert (2), hue (2), grayscale (2), contrast (2), brightness (2), blur (2), filter (2), repeat (2), clip (2), blend (2), offset (2), rows (2), template (2), trademark, policy, copyright, 2026, labs, inc, 7xl, 1152px, 6xl, 5xl, 896px, 4xl, 672px, 576px, 512px, 448px, 384px, 288px, 2xs, 3xs, includes, ranging, cqh, 50cqw, cqi, cqw, 960px, adds, 50cqb, depend, possible, distant, rather, nearest, designs, multiple, nested, regular, below, child, elements, entire, lot, portable, reusable, because, actual, support, 600px, sky, 300, doesn, include, generate, fly, desktop, laptop, tablet, define, scratch, remove, its, keyword, additional, defaults, note, important, always, same, unit, defining, generated, may, sorted, causing, ways, updates, creates, 100rem, 120, 100, read, stacking, next, generates, corresponding, out, following, active, limit, rules, stay, reason, implement, layer, changes, etc, them, devices, where, approach, surprises, people, most, meaning, screen, while, specified, system, similar, might, frameworks, bootstrap, easily, prefixes, automatically, constrained, fixed, ensured, never, shrinks, prevent, shrinking, technically, would, nothing, smaller, matters, outer, becomes, how, places, looking, away, retreat, enjoy, awesome, food, some, sunshine, gray, incredible, accommodation, leading, tight, black, href, company, retreats, semibold, tracking, wide, indigo, architecture, alt, jpg, cover, hidden, rounded, simple, marketing, stacked, literally, anything, given, even, things, framework, 1536px, there, five, inspired, common, resolutions, large, certain, character, document, head, tag, conditionally, different, piece, cake, without, ever, leaving, adaptive, forced, adjust, accessibility, fill, svg, select, touch, action, stop, gutter, resize, pointer, events, field, scheme, caret, appearance, accent, interactivity, zoom, translate, skew, backface, transforms, delay, timing, function, duration, property, transitions, caption, table, collapse, tables, backdrop, drop, filters, composite, mix, effects, radius, borders, attachment, backgrounds, hyphens, word, vertical, tab, indent, thickness, clamp, settings, numeric, stretch, weight, smoothing, family, typography, gap, flow, column, grow, direction, basis, flexbox, top, right, bottom, overscroll, fit, isolation, float, inside, before, after, aspect, ratio, preflight, base, functions, directives, detecting, source, files, colors, styling, upgrade, guide, compatibility, editor, setup, installation, getting, started, course, partners, docs, ctrl,
Text of the page (random words):
responsive design core concepts tailwind css v 4 3 k ctrl k docs blog showcase partners plus core concepts responsive design documentation components templates ui kit playground course new community getting started installation editor setup compatibility upgrade guide core concepts styling with utility classes hover focus and other states responsive design dark mode theme variables colors adding custom styles detecting classes in source files functions and directives base styles preflight layout aspect ratio columns break after break before break inside box decoration break box sizing display float clear isolation object fit object position overflow overscroll behavior position top right bottom left visibility z index flexbox grid flex basis flex direction flex wrap flex flex grow flex shrink order grid template columns grid column grid template rows grid row grid auto flow grid auto columns grid auto rows gap justify content justify items justify self align content align items align self place content place items place self spacing padding margin sizing width min width max width height min height max height inline size min inline size max inline size block size min block size max block size typography font family font size font smoothing font style font weight font stretch font variant numeric font feature settings letter spacing line clamp line height list style image list style position list style type text align color text decoration line text decoration color text decoration style text decoration thickness text underline offset text transform text overflow text wrap text indent tab size vertical align white space word break overflow wrap hyphens content backgrounds background attachment background clip background color background image background origin background position background repeat background size borders border radius border width border color border style outline width outline color outline style outline offset effects box shadow text shadow opacity mix blend mode background blend mode mask clip mask composite mask image mask mode mask origin mask position mask repeat mask size mask type filters filter blur brightness contrast drop shadow grayscale hue rotate invert saturate sepia backdrop filter blur brightness contrast grayscale hue rotate invert opacity saturate sepia tables border collapse border spacing table layout caption side transitions animation transition property transition behavior transition duration transition timing function transition delay animation transforms backface visibility perspective perspective origin rotate scale skew transform transform origin transform style translate zoom interactivity accent color appearance caret color color scheme cursor field sizing pointer events resize scroll behavior scrollbar color scrollbar width scrollbar gutter scroll margin scroll padding scroll snap align scroll snap stop scroll snap type touch action user select will change svg fill stroke stroke width accessibility forced color adjust core concepts responsive design using responsive utility variants to build adaptive user interfaces overview every utility class in tailwind can be applied conditionally at different breakpoints which makes it a piece of cake to build complex responsive interfaces without ever leaving your html first make sure you ve added the viewport meta tag to the head of your document index html meta name viewport content width device width initial scale 1 0 then to add a utility but only have it take effect at a certain breakpoint all you need to do is prefix the utility with the breakpoint name followed by the character html width of 16 by default 32 on medium screens and 48 on large screens img class w 16 md w 32 lg w 48 src there are five breakpoints by default inspired by common device resolutions breakpoint prefix minimum width 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 this works for every utility class in the framework which means you can change literally anything at a given breakpoint even things like letter spacing or cursor styles here s a simple example of a marketing page component that uses a stacked layout on small screens and a side by side layout on larger screens div class mx auto max w md overflow hidden rounded xl bg white shadow md md max w 2xl div class md flex div class md shrink 0 img class h 48 w full object cover md h full md w 48 src img building jpg alt modern building architecture div div class p 8 div class text sm font semibold tracking wide text indigo 500 uppercase company retreats div a href class mt 1 block text lg leading tight font medium text black hover underline incredible accommodation for your team a p class mt 2 text gray 500 looking to take your team away on a retreat to enjoy awesome food and take in some sunshine we have a list of places to do just that p div div div here s how the example above works by default the outer div is display block but by adding the md flex utility it becomes display flex on medium screens and larger when the parent is a flex container we want to make sure the image never shrinks so we ve added md shrink 0 to prevent shrinking on medium screens and larger technically we could have just used shrink 0 since it would do nothing on smaller screens but since it only matters on md screens it s a good idea to make that clear in the class name on small screens the image is automatically full width by default on medium screens and up we ve constrained the width to a fixed size and ensured the image is full height using md h full md w 48 we ve only used one breakpoint in this example but you could easily customize this component at other sizes using the sm lg xl or 2xl responsive prefixes as well working mobile first tailwind uses a mobile first breakpoint system similar to what you might be used to in other frameworks like bootstrap what this means is that unprefixed utilities like uppercase take effect on all screen sizes while prefixed utilities like md uppercase only take effect at the specified breakpoint and above targeting mobile screens where this approach surprises people most often is that to style something for mobile you need to use the unprefixed version of a utility not the sm prefixed version don t think of sm as meaning on small screens think of it as at the small breakpoint don t use sm to target mobile devices html this will only center text on screens 640px and wider not on small screens div class sm text center div use unprefixed utilities to target mobile and override them at larger breakpoints html this will center text on mobile and left align it on screens 640px and wider div class text center sm text left div for this reason it s often a good idea to implement the mobile layout for a design first then layer on any changes that make sense for sm screens followed by md screens etc targeting a breakpoint range by default styles applied by rules like md flex will apply at that breakpoint and stay applied at larger breakpoints if you d like to apply a utility only when a specific breakpoint range is active stack a responsive variant like md with a max variant to limit that style to a specific range html div class md max xl flex div tailwind generates a corresponding max variant for each breakpoint so out of the box the following variants are available variant media query max sm media width 40rem max md media width 48rem max lg media width 64rem max xl media width 80rem max 2xl media width 96rem targeting a single breakpoint to target a single breakpoint target the range for that breakpoint by stacking a responsive variant like md with the max variant for the next breakpoint html div class md max lg flex div read about targeting breakpoint ranges to learn more using custom breakpoints customizing your theme use the breakpoint theme variables to customize your breakpoints app css import tailwindcss theme breakpoint xs 30 rem breakpoint 2xl 100 rem breakpoint 3xl 120 rem this updates the 2xl breakpoint to use 100rem instead of the default 96rem and creates new xs and 3xl breakpoints that can be used in your markup html div class grid xs grid cols 2 3xl grid cols 6 div note that it s important to always use the same unit for defining your breakpoints or the generated utilities may be sorted in an unexpected order causing breakpoint classes to override each other in unexpected ways tailwind uses rem for the default breakpoints so if you are adding additional breakpoints to the defaults make sure you use rem as well learn more about customizing your theme in the theme documentation removing default breakpoints to remove a default breakpoint reset its value to the initial keyword app css import tailwindcss theme breakpoint 2xl initial you can also reset all of the default breakpoints using breakpoint initial then define all of your breakpoints from scratch app css import tailwindcss theme breakpoint initial breakpoint tablet 40 rem breakpoint laptop 64 rem breakpoint desktop 80 rem learn more removing default theme values in the theme documentation using arbitrary values if you need to use a one off breakpoint that doesn t make sense to include in your theme use the min or max variants to generate a custom breakpoint on the fly using any arbitrary value div class max 600px bg sky 300 min 320px text center div learn more about arbitrary value support in the arbitrary values documentation container queries what are container queries container queries are a modern css feature that let you style something based on the size of a parent element instead of the size of the entire viewport they let you build components that are a lot more portable and reusable because they can change based on the actual space available for that component basic example 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 size of the container html div class container div class flex flex col md flex row div div just like breakpoint variants container queries are mobile first in tailwind css and apply at the target container size and up max width container queries use variants like max sm and max md to apply a style below a specific container size html div class container div class flex flex row max md flex col div div container query ranges stack a regular container query variant with a max width container query variant to target a specific range html div class container div class flex flex row sm max md flex col div div named containers for complex designs that use multiple nested containers you can name containers using container name and target specific containers with variants like sm name and md name html div class container main div class flex flex row sm main flex col div div this makes it possible to style something based on the size of a distant container rather than just the nearest container using 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 the block size like cqb html div class container size div class h 50cqb div div you can also name size containers using container size name using custom container sizes use the container theme variables to customize your container sizes app css import tailwindcss theme container 8xl 96 rem this adds a new 8xl container query variant that can be used in your markup html div class container div class flex flex col 8xl flex row div div learn more about customizing your theme in the theme documentation using arbitrary values use variants like min 475px and max 960px for one off container query sizes you don t want to add to your theme html div class container div class flex flex col min 475px flex row div div using container query units use container query length units like cqw and cqi as arbitrary values in other utility classes to reference the container size html div class container div class w 50cqw div div for units that need more than the inline size like cqb and cqh use container size to make the full size of the container available container size reference by default tailwind includes container sizes ranging from 16rem 256px to 80rem 1280px variant minimum width 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 hover focus and other states dark mode on this page overview working mobile first targeting mobile screens targeting a breakpoint range targeting a single breakpoint using custom breakpoints customizing your theme removing default breakpoints using arbitrary values container queries what are container queries basic example max width container queries container query ranges named containers using size containers using custom container sizes using container query units container size reference tailwind css documentation playground blog showcase sponsor resources refactoring ui headless ui heroicons hero patterns tailwind plus ui blocks templates ui kit community github discord x tailwind css documentation playground blog showcase sponsor tailwind plus ui blocks templates ui kit resources refactoring ui headless ui heroicons hero patterns community github discord x copyright 2026 tailwind labs inc trademark policy
|
