## 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> |
||
|---|---|---|
| .. | ||
| @tailwindcss-browser | ||
| @tailwindcss-cli | ||
| @tailwindcss-node | ||
| @tailwindcss-postcss | ||
| @tailwindcss-standalone | ||
| @tailwindcss-upgrade | ||
| @tailwindcss-vite | ||
| @tailwindcss-webpack | ||
| internal-example-plugin | ||
| tailwindcss | ||
| tsconfig.base.json | ||