Skip to content

Commit 991072f

Browse files
adamwathanclaudecoderabbitai[bot]RobinMalfait
authored
Add logical block-start/block-end border, margin, and padding utilities (tailwindlabs#19601)
## Summary This PR adds support for logical block-start and block-end CSS properties in Tailwind CSS utilities. These properties are part of the CSS Logical Properties specification and provide writing-mode-aware alternatives to physical top/bottom properties. The following new utilities are added: - **Border utilities**: `border-bs-*` and `border-be-*` (for `border-block-start` and `border-block-end`) - **Margin utilities**: `mbs-*` and `mbe-*` (for `margin-block-start` and `margin-block-end`) - **Scroll margin utilities**: `scroll-mbs-*` and `scroll-mbe-*` (for `scroll-margin-block-start` and `scroll-margin-block-end`) - **Scroll padding utilities**: `scroll-pbs-*` and `scroll-pbe-*` (for `scroll-padding-block-start` and `scroll-padding-block-end`) - **Padding utilities**: `pbs-*` and `pbe-*` (for `padding-block-start` and `padding-block-end`) These utilities follow the same patterns as their existing inline-start/inline-end counterparts and support all standard modifiers (arbitrary values, negative values, opacity modifiers, etc.). ## Changes 1. **utilities.ts**: Added new utility definitions for all block-start/block-end properties 2. **property-order.ts**: Updated CSS property ordering to include the new logical properties in the correct cascade order 3. **utilities.test.ts**: Added comprehensive test cases for all new utilities 4. **utilities.test.ts.snap**: Updated snapshots showing generated CSS for the new utilities ## Test plan All changes are covered by existing test infrastructure: - Unit tests verify correct CSS generation for each utility variant - Snapshot tests validate the complete output for border utilities - Invalid modifier combinations are tested to ensure proper error handling - Tests cover standard values, arbitrary values, negative values, and opacity modifiers https://claude.ai/code/session_01V89HxEtppGVvMtuPbYrayM --------- Co-authored-by: Claude <noreply@anthropic.com> Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com> Co-authored-by: Robin Malfait <malfait.robin@gmail.com>
1 parent 566eea4 commit 991072f

6 files changed

Lines changed: 1427 additions & 0 deletions

File tree

CHANGELOG.md

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,7 @@ 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))
2122
- _Experimental_: Add `@container-size` utility ([#18901](https://github.com/tailwindlabs/tailwindcss/pull/18901))
2223
- Add `@tailwindcss/webpack` loader for Tailwind CSS v4 ([#19610](https://github.com/tailwindlabs/tailwindcss/pull/19610))
2324

0 commit comments

Comments
 (0)