Skip to content

Commit 5395c7e

Browse files
adamwathanclaudeRobinMalfait
authored
Add logical inset utilities (inset-s, inset-e, inset-bs, inset-be) (tailwindlabs#19613)
## Summary This PR adds support for logical inset utilities that map to CSS logical properties: - `inset-s` → `inset-inline-start` - `inset-e` → `inset-inline-end` - `inset-bs` → `inset-block-start` - `inset-be` → `inset-block-end` These utilities complement the existing `inset-x` (inline) and `inset-y` (block) utilities, providing more granular control over positioning in a direction-aware manner. This aligns with CSS logical properties and improves support for internationalization (RTL/LTR languages). ### Changes 1. **property-order.ts**: Added `inset-block-start` and `inset-block-end` to the property ordering list to ensure consistent cascade ordering 2. **utilities.ts**: Added four new utility mappings for the logical inset properties 3. **utilities.test.ts**: Added comprehensive test coverage for all four new utilities, including: - Valid class generation with various value types (custom spacing, percentages, arbitrary values) - Negative value support - Invalid class rejection (malformed syntax, invalid modifiers) ## Test plan All changes are covered by unit tests in `utilities.test.ts`: - `inset-s` test: 8 valid classes + 13 invalid class assertions - `inset-e` test: 8 valid classes + 13 invalid class assertions - `inset-bs` test: 8 valid classes + 13 invalid class assertions - `inset-be` test: 8 valid classes + 13 invalid class assertions Each test verifies correct CSS output generation and proper rejection of malformed utilities. https://claude.ai/code/session_01JcYXVAMawRuntKatjku1WZ --------- Co-authored-by: Claude <noreply@anthropic.com> Co-authored-by: Robin Malfait <malfait.robin@gmail.com>
1 parent 3d1e654 commit 5395c7e

7 files changed

Lines changed: 995 additions & 305 deletions

File tree

CHANGELOG.md

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,10 +18,15 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
1818

1919
### Added
2020

21-
- 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))
2221
- _Experimental_: Add `@container-size` utility ([#18901](https://github.com/tailwindlabs/tailwindcss/pull/18901))
2322
- Add `@tailwindcss/webpack` loader for Tailwind CSS v4 ([#19610](https://github.com/tailwindlabs/tailwindcss/pull/19610))
23+
- 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))
2424
- 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))
25+
- Add `inset-s-*`, `inset-e-*`, `inset-bs-*`, `inset-be-*` utilities for `inset-inline-start`, `inset-inline-end`, `inset-block-start`, and `inset-block-end` ([#19613](https://github.com/tailwindlabs/tailwindcss/pull/19613))
26+
27+
### Deprecated
28+
29+
- Deprecate `start-*` and `end-*` utilities in favor of `inline-s-*` and `inline-e-*` ([#19613](https://github.com/tailwindlabs/tailwindcss/pull/19613))
2530

2631
## [4.1.18] - 2025-12-11
2732

0 commit comments

Comments
 (0)