Add logical block-start/block-end border, margin, and padding utilities#19601
Add logical block-start/block-end border, margin, and padding utilities#19601RobinMalfait merged 4 commits intomainfrom
Conversation
Add new logical property utilities following the existing pattern for inline-start/inline-end: - pbs-*, pbe-* for padding-block-start, padding-block-end - mbs-*, mbe-* for margin-block-start, margin-block-end - border-bs-*, border-be-* for border-block-start, border-block-end - scroll-pbs-*, scroll-pbe-* for scroll-padding-block-start, scroll-padding-block-end - scroll-mbs-*, scroll-mbe-* for scroll-margin-block-start, scroll-margin-block-end These complement the existing ps-*, pe-*, ms-*, me-*, border-s-*, border-e-* utilities by providing block axis equivalents. https://claude.ai/code/session_01V89HxEtppGVvMtuPbYrayM
|
@claude Can you update the changelog too? |
WalkthroughAdds block-axis CSS property variants to Tailwind’s property ordering and registers corresponding utilities/shorthands. Property-order updates include 🚥 Pre-merge checks | ✅ 2✅ Passed checks (2 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. Comment |
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Fix all issues with AI agents
In `@CHANGELOG.md`:
- Line 21: Update the placeholder PR link in the changelog entry by replacing
`#XXXXX` with the actual PR number (e.g. `#NNNNN`) so the link is not broken,
and extend the utilities list that currently includes `pbs-*`, `pbe-*`, `mbs-*`,
`mbe-*`, `border-bs-*`, `border-be-*` to also mention the new scroll logical
utilities for scroll padding/margin (add the corresponding `scroll-pbs-*`,
`scroll-pbe-*`, `scroll-mbs-*`, `scroll-mbe-*` or a single `scroll-*` notation
consistent with the existing naming pattern) so the release note accurately
reflects the PR changes.
Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>
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-bs-*andborder-be-*(forborder-block-startandborder-block-end)mbs-*andmbe-*(formargin-block-startandmargin-block-end)scroll-mbs-*andscroll-mbe-*(forscroll-margin-block-startandscroll-margin-block-end)scroll-pbs-*andscroll-pbe-*(forscroll-padding-block-startandscroll-padding-block-end)pbs-*andpbe-*(forpadding-block-startandpadding-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
Test plan
All changes are covered by existing test infrastructure:
https://claude.ai/code/session_01V89HxEtppGVvMtuPbYrayM