Meta tags:
description=Utilities for setting the block size of an element.;

Headings (most frequently used words):

matching, viewport, tailwind, using, css, resources, plus, community, block, size, examples, customizing, your, theme, getting, started, core, concepts, base, styles, layout, flexbox, grid, spacing, sizing, typography, backgrounds, borders, effects, filters, tables, transitions, animation, transforms, interactivity, svg, accessibility, basic, example, percentage, dynamic, large, small, custom, value, responsive, design, on, this, page,

Text of the page (most frequently used words):
block (112), size (45), div (38), the (25), class (20), #viewport (12), text (11), color (10), mask (9), background (9), custom (8), matching (8), #spacing (8), use (8), style (8), font (8), grid (8), theme (7), min (7), max (7), utility (7), element (7), content (7), width (7), tailwind (6), value (6), full (6), sizing (6), scroll (6), align (6), border (6), flex (6), documentation (5), using (5), and (5), property (5), auto (5), transition (5), position (5), break (5), decoration (5), css (4), inline (4), utilities (4), number (4), screen (4), for (4), var (4), set (4), transform (4), origin (4), mode (4), outline (4), height (4), community (3), kit (3), templates (3), plus (3), showcase (3), blog (3), playground (3), customizing (3), your (3), responsive (3), design (3), percentage (3), more (3), scale (3), like (3), based (3), svh (3), lvh (3), dvh (3), fraction (3), fit (3), styles (3), snap (3), type (3), scrollbar (3), behavior (3), rotate (3), shadow (3), image (3), box (3), overflow (3), wrap (3), line (3), list (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), small (2), large (2), dynamic (2), basic (2), example (2), examples (2), this (2), learn (2), about (2), variable (2), which (2), can (2), variants (2), with (2), variant (2), function (2), you (2), variables (2), syntax (2), possible (2), make (2), span (2), entire (2), 100 (2), calc (2), stroke (2), padding (2), margin (2), perspective (2), visibility (2), animation (2), layout (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), object (2), classes (2), trademark, policy, copyright, 2026, labs, inc, quick, reference, page, are, driven, customized, own, prefix, breakpoint, only, apply, medium, sizes, above, just, shorthand, that, adds, automatically, also, 32rem, completely, smallest, largest, changes, browser, expands, contracts, give, fixed, show, 1lh, 100svw, svw, 100svh, 100lvw, lvw, 100lvh, 100dvw, dvw, 100dvh, 100vh, 1px, setting, forced, adjust, accessibility, fill, svg, will, change, user, select, touch, action, stop, gutter, resize, pointer, events, field, cursor, scheme, caret, appearance, accent, interactivity, zoom, translate, skew, backface, transforms, delay, timing, duration, transitions, caption, side, table, collapse, tables, backdrop, drop, filters, composite, mix, effects, radius, borders, attachment, backgrounds, hyphens, word, white, space, vertical, tab, indent, underline, thickness, clamp, letter, feature, settings, numeric, stretch, weight, smoothing, family, typography, gap, flow, row, column, order, shrink, grow, direction, basis, flexbox, index, top, right, bottom, left, overscroll, isolation, clear, float, display, inside, before, after, aspect, ratio, preflight, base, functions, directives, detecting, source, files, adding, colors, dark, hover, focus, other, states, styling, core, concepts, upgrade, guide, compatibility, editor, setup, installation, getting, started, new, course, components, partners, docs, ctrl,

Text of the page (random words):
block size sizing tailwind css v 4 3 k ctrl k docs blog showcase partners plus sizing block size 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 sizing block size utilities for setting the block size of an element class styles block number block size calc var spacing number block fraction block size calc fraction 100 block auto block size auto block px block size 1px block full block size 100 block screen block size 100vh block dvh block size 100dvh block dvw block size 100dvw block lvh block size 100lvh block lvw block size 100lvw block svh block size 100svh block svw block size 100svw block min block size min content block max block size max content block fit block size fit content block lh block size 1lh block custom property block size var custom property block value block size value show more examples basic example use block number utilities like block 24 and block 64 to set an element to a fixed block size based on the spacing scale block 96 block 80 block 64 block 48 block 40 block 32 block 24 div class block 96 block 96 div div class block 80 block 80 div div class block 64 block 64 div div class block 48 block 48 div div class block 40 block 40 div div class block 32 block 32 div div class block 24 block 24 div using a percentage use block full or block fraction utilities like block 1 2 and block 2 5 to give an element a percentage based block size block full block 9 10 block 3 4 block 1 2 block 1 3 div class block full block full div div class block 9 10 block 9 10 div div class block 3 4 block 3 4 div div class block 1 2 block 1 2 div div class block 1 3 block 1 3 div matching viewport use the block screen utility to make an element span the entire block size of the viewport div class block screen div matching dynamic viewport use the block dvh utility to make an element span the entire block size of the viewport which changes as the browser ui expands or contracts div class block dvh div matching large viewport use the block lvh utility to set an element s block size to the largest possible size of the viewport div class block lvh div matching small viewport use the block svh utility to set an element s block size to the smallest possible size of the viewport div class block svh div using a custom value use the block value syntax to set the block size based on a completely custom value div class block 32rem div for css variables you can also use the block custom property syntax div class block my block size div this is just a shorthand for block var custom property that adds the var function for you automatically responsive design prefix a block size utility with a breakpoint variant like md to only apply the utility at medium screen sizes and above div class block 1 2 md block full div learn more about using variants in the variants documentation customizing your theme the block number utilities are driven by the spacing theme variable which can be customized in your own theme theme spacing 1 px learn more about customizing the spacing scale in the theme variable documentation max inline size min block size on this page quick reference examples basic example using a percentage matching viewport matching dynamic viewport matching large viewport matching small viewport using a custom value responsive design customizing your theme 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