block-size theme customization
The block-size utilities can be customized by extending the spacing scale in the theme configuration.
Tailwind CSS · Utilities reference · all subjects
block-size
47 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.
block-<number> utility
The block-<number> utility sets block-size using the spacing scale: block-size: calc(var(--spacing) * <number>);
block-<fraction> utility
The block-<fraction> utility sets block-size as a percentage: block-size: calc(<fraction> * 100%); For example, block-1/2 produces block-size: calc(1/2 * 100%);
block-auto utility
The block-auto utility sets block-size: auto;
block-px utility
The block-px utility sets block-size: 1px;
block-full utility
The block-full utility sets block-size: 100%;
block-screen utility
The block-screen utility sets block-size: 100vh; This makes an element span the entire block size of the viewport.
block-dvh utility
The block-dvh utility sets block-size: 100dvh; This makes an element span the entire block size of the viewport, which changes as the browser UI expands or contracts.
block-dvw utility
The block-dvw utility sets block-size: 100dvw;
block-svh utility
The block-svh utility sets block-size: 100svh; This sets an element's block size to the smallest possible size of the viewport.
block-svw utility
The block-svw utility sets block-size: 100svw;
block-min utility
The block-min utility sets block-size: min-content;
block-fit utility
The block-fit utility sets block-size: fit-content;
block-lh utility
The block-lh utility sets block-size: 1lh;
block-(<custom-property>) utility
The block-(<custom-property>) utility references a custom property: block-size: var(<custom-property>);
block-[<value>] arbitrary value utility
The block-[<value>] utility allows arbitrary values: block-size: <value>;
block-size utilities responsive design
All block-size utilities support responsive design with responsive breakpoint prefixes. The default class is block-1/2 and a featured example is block-full.
max-block-fit utility
The max-block-fit utility sets max-block-size: fit-content.
max-block-<number> utility
The max-block-<number> utility sets max-block-size to calc(var(--spacing) * <number>), allowing you to set maximum block size based on the spacing scale. Examples include max-block-24, max-block-32, max-block-40, max-block-48, max-block-64, and max-block-80.
max-block-<fraction> utility
The max-block-<fraction> utility sets max-block-size to calc(<fraction> * 100%), allowing percentage-based maximum block sizes. Examples include max-block-1/2, max-block-3/4, max-block-9/10, and max-block-1/4.
max-block-none utility
The max-block-none utility sets max-block-size: none.
max-block-px utility
The max-block-px utility sets max-block-size: 1px.
max-block-full utility
The max-block-full utility sets max-block-size: 100%.
max-block-screen utility
The max-block-screen utility sets max-block-size: 100vh.
max-block-dvw utility
The max-block-dvw utility sets max-block-size: 100dvw (dynamic viewport width).
max-block-svh utility
The max-block-svh utility sets max-block-size: 100svh (small viewport height).
max-block-svw utility
The max-block-svw utility sets max-block-size: 100svw (small viewport width).
max-block-min utility
The max-block-min utility sets max-block-size: min-content.
max-block utilities customization with spacing scale
You can customize the max-block utilities by extending or modifying the spacing scale in your theme configuration.
max-block-lh utility
The max-block-lh utility sets max-block-size: 1lh (line height unit).
max-block-(<custom-property>) syntax
You can use max-block-(<custom-property>) syntax to set max-block-size: var(<custom-property>) for referencing CSS custom properties.
max-block-[<value>] arbitrary value syntax
You can use max-block-[<value>] syntax to set max-block-size to any arbitrary value, for example max-block-[220px].
max-block-size responsive and state variants
The max-block-size utilities support responsive design variants and state variants, allowing you to apply different maximum block sizes at different breakpoints and in different states.
min-block-<number> utility class and CSS output
The min-block-<number> utility class sets the minimum block size using the spacing scale. The CSS generated is min-block-size: calc(var(--spacing) * <number>);
min-block-<fraction> utility class and CSS output
The min-block-<fraction> utility class sets the minimum block size to a percentage. The CSS generated is min-block-size: calc(<fraction> * 100%);
min-block-px utility class and CSS output
The min-block-px utility class sets the minimum block size to 1 pixel. The CSS generated is min-block-size: 1px;
min-block-full utility class and CSS output
The min-block-full utility class sets the minimum block size to 100 percent of the parent. The CSS generated is min-block-size: 100%;
min-block-dvw utility class and CSS output
The min-block-dvw utility class sets the minimum block size to 100 dynamic viewport width. The CSS generated is min-block-size: 100dvw;
min-block-svh utility class and CSS output
The min-block-svh utility class sets the minimum block size to 100 small viewport height. The CSS generated is min-block-size: 100svh;
min-block-auto utility class and CSS output
The min-block-auto utility class sets the minimum block size to auto. The CSS generated is min-block-size: auto;
min-block-max utility class and CSS output
The min-block-max utility class sets the minimum block size to max-content. The CSS generated is min-block-size: max-content;
min-block-fit utility class and CSS output
The min-block-fit utility class sets the minimum block size to fit-content. The CSS generated is min-block-size: fit-content;
min-block-lh utility class and CSS output
The min-block-lh utility class sets the minimum block size to 1 line height. The CSS generated is min-block-size: 1lh;
min-block-(<custom-property>) utility class and CSS output
The min-block-(<custom-property>) utility class sets the minimum block size to the value of a custom CSS property. The CSS generated is min-block-size: var(<custom-property>);
min-block-[<value>] arbitrary value utility class and CSS output
The min-block-[<value>] utility class allows setting the minimum block size to any custom value. The CSS generated is min-block-size: <value>;
min-block utilities support responsive design
The min-block utilities respond to responsive breakpoints. You can use responsive variants like sm:min-block-full, md:min-block-96, etc. to apply different minimum block sizes at different screen sizes.
min-block utilities can be customized using spacing scale
The min-block utilities use the spacing scale from the theme. You can customize the spacing scale to change all spacing-based min-block utilities at once.