Skip to content

Commit 3d1e654

Browse files
adamwathanclaudeRobinMalfait
authored
Add logical sizing utilities (inline-size, block-size) (tailwindlabs#19612)
## Summary Adds new utilities for CSS logical properties that provide writing-direction-aware alternatives to width and height: - `inline-*` for `inline-size` (logical equivalent of width) - `min-inline-*` for `min-inline-size` (logical equivalent of min-width) - `max-inline-*` for `max-inline-size` (logical equivalent of max-width) - `block-*` for `block-size` (logical equivalent of height) - `min-block-*` for `min-block-size` (logical equivalent of min-height) - `max-block-*` for `max-block-size` (logical equivalent of max-height) ## New Utilities ### inline-size utilities | Class | CSS Property | |-------|-------------| | `inline-auto` | `inline-size: auto` | | `inline-full` | `inline-size: 100%` | | `inline-min` | `inline-size: min-content` | | `inline-max` | `inline-size: max-content` | | `inline-fit` | `inline-size: fit-content` | | `inline-screen` | `inline-size: 100vw` | | `inline-svw` | `inline-size: 100svw` | | `inline-lvw` | `inline-size: 100lvw` | | `inline-dvw` | `inline-size: 100dvw` | | `inline-{spacing}` | `inline-size: {value}` (e.g., `inline-4`, `inline-px`) | | `inline-{fraction}` | `inline-size: {percent}` (e.g., `inline-1/2`, `inline-3/4`) | | `inline-[{value}]` | `inline-size: {value}` (arbitrary values) | ### min-inline-size utilities | Class | CSS Property | |-------|-------------| | `min-inline-auto` | `min-inline-size: auto` | | `min-inline-full` | `min-inline-size: 100%` | | `min-inline-min` | `min-inline-size: min-content` | | `min-inline-max` | `min-inline-size: max-content` | | `min-inline-fit` | `min-inline-size: fit-content` | | `min-inline-screen` | `min-inline-size: 100vw` | | `min-inline-svw` | `min-inline-size: 100svw` | | `min-inline-lvw` | `min-inline-size: 100lvw` | | `min-inline-dvw` | `min-inline-size: 100dvw` | | `min-inline-{spacing}` | `min-inline-size: {value}` | | `min-inline-[{value}]` | `min-inline-size: {value}` (arbitrary values) | ### max-inline-size utilities | Class | CSS Property | |-------|-------------| | `max-inline-none` | `max-inline-size: none` | | `max-inline-full` | `max-inline-size: 100%` | | `max-inline-min` | `max-inline-size: min-content` | | `max-inline-max` | `max-inline-size: max-content` | | `max-inline-fit` | `max-inline-size: fit-content` | | `max-inline-screen` | `max-inline-size: 100vw` | | `max-inline-svw` | `max-inline-size: 100svw` | | `max-inline-lvw` | `max-inline-size: 100lvw` | | `max-inline-dvw` | `max-inline-size: 100dvw` | | `max-inline-{spacing}` | `max-inline-size: {value}` | | `max-inline-[{value}]` | `max-inline-size: {value}` (arbitrary values) | ### block-size utilities | Class | CSS Property | |-------|-------------| | `block-auto` | `block-size: auto` | | `block-full` | `block-size: 100%` | | `block-min` | `block-size: min-content` | | `block-max` | `block-size: max-content` | | `block-fit` | `block-size: fit-content` | | `block-screen` | `block-size: 100vh` | | `block-lh` | `block-size: 1lh` | | `block-svh` | `block-size: 100svh` | | `block-lvh` | `block-size: 100lvh` | | `block-dvh` | `block-size: 100dvh` | | `block-{spacing}` | `block-size: {value}` (e.g., `block-4`, `block-px`) | | `block-{fraction}` | `block-size: {percent}` (e.g., `block-1/2`, `block-3/4`) | | `block-[{value}]` | `block-size: {value}` (arbitrary values) | ### min-block-size utilities | Class | CSS Property | |-------|-------------| | `min-block-auto` | `min-block-size: auto` | | `min-block-full` | `min-block-size: 100%` | | `min-block-min` | `min-block-size: min-content` | | `min-block-max` | `min-block-size: max-content` | | `min-block-fit` | `min-block-size: fit-content` | | `min-block-screen` | `min-block-size: 100vh` | | `min-block-lh` | `min-block-size: 1lh` | | `min-block-svh` | `min-block-size: 100svh` | | `min-block-lvh` | `min-block-size: 100lvh` | | `min-block-dvh` | `min-block-size: 100dvh` | | `min-block-{spacing}` | `min-block-size: {value}` | | `min-block-[{value}]` | `min-block-size: {value}` (arbitrary values) | ### max-block-size utilities | Class | CSS Property | |-------|-------------| | `max-block-none` | `max-block-size: none` | | `max-block-full` | `max-block-size: 100%` | | `max-block-min` | `max-block-size: min-content` | | `max-block-max` | `max-block-size: max-content` | | `max-block-fit` | `max-block-size: fit-content` | | `max-block-screen` | `max-block-size: 100vh` | | `max-block-lh` | `max-block-size: 1lh` | | `max-block-svh` | `max-block-size: 100svh` | | `max-block-lvh` | `max-block-size: 100lvh` | | `max-block-dvh` | `max-block-size: 100dvh` | | `max-block-{spacing}` | `max-block-size: {value}` | | `max-block-[{value}]` | `max-block-size: {value}` (arbitrary values) | ## Test plan - [x] Added comprehensive unit tests for all new utilities - [ ] Verify utilities work correctly in RTL layouts - [ ] Test with vertical writing modes --------- Co-authored-by: Claude <noreply@anthropic.com> Co-authored-by: Robin Malfait <malfait.robin@gmail.com>
1 parent 991072f commit 3d1e654

4 files changed

Lines changed: 1061 additions & 0 deletions

File tree

CHANGELOG.md

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
2121
- Add `pbs-*`, `pbe-*`, `mbs-*`, `mbe-*`, `scroll-pbs-*`, `scroll-pbe-*`, `scroll-mbs-*`, `scroll-mbe-*`, `border-bs-*`, `border-be-*` utilities for `padding-block-start`, `padding-block-end`, `margin-block-start`, `margin-block-end`, `scroll-padding-block-start`, `scroll-padding-block-end`, `scroll-margin-block-start`, `scroll-margin-block-end`, `border-block-start`, and `border-block-end` ([`#19601`](https://github.com/tailwindlabs/tailwindcss/pull/19601))
2222
- _Experimental_: Add `@container-size` utility ([#18901](https://github.com/tailwindlabs/tailwindcss/pull/18901))
2323
- Add `@tailwindcss/webpack` loader for Tailwind CSS v4 ([#19610](https://github.com/tailwindlabs/tailwindcss/pull/19610))
24+
- Add `inline-*`, `min-inline-*`, `max-inline-*`, `block-*`, `min-block-*`, `max-block-*` utilities for `inline-size`, `min-inline-size`, `max-inline-size`, `block-size`, `min-block-size`, and `max-block-size` ([#19612](https://github.com/tailwindlabs/tailwindcss/pull/19612))
2425

2526
## [4.1.18] - 2025-12-11
2627

0 commit comments

Comments
 (0)