tailwindcss
tailwindcss copied to clipboard
Add logical properties support for inline direction
This PR introduces support for logical properties in the inline direction for all relevant existing utilities, making it easier to build sites that support LTR and RTL layouts without having to use the rtl:
variant when you simply need to mirror the styles.
New class | Properties | Physical counterpart (LTR) |
---|---|---|
start-* |
inset-inline-start |
left-* |
end-* |
inset-inline-end |
right-* |
ms-* |
margin-inline-start |
ml-* |
me-* |
margin-inline-end |
mr-* |
ps-* |
padding-inline-start |
pl-* |
pe-* |
padding-inline-end |
pr-* |
rounded-s-* |
border-start-start-radius border-end-start-radius |
rounded-l-* |
rounded-e-* |
border-start-end-radius border-end-end-radius |
rounded-l-* |
rounded-ss-* |
border-start-start-radius |
rounded-tl-* |
rounded-se-* |
border-start-end-radius |
rounded-tr-* |
rounded-ee-* |
border-end-end-radius |
rounded-br-* |
rounded-es-* |
border-end-start-radius |
rounded-bl-* |
border-s-* |
border-inline-start-width |
border-l-* |
border-e-* |
border-inline-end-width |
border-r-* |
border-s-* |
border-inline-start-color |
border-l-* |
border-e-* |
border-inline-end-color |
border-r-* |
scroll-ms-* |
scroll-margin-inline-start |
scroll-ml-* |
scroll-me-* |
scroll-margin-inline-end |
scroll-mr-* |
scroll-ps-* |
scroll-padding-inline-start |
scroll-pl-* |
scroll-pe-* |
scroll-padding-inline-end |
scroll-pr-* |
Considerations
This PR is limited to supporting the inline direction only, as supporting the block direction introduces potential naming collisions that make the API design more challenging, for example is mb-2
for margin-bottom
or margin-block
?
After a bunch of research and talking to people in the community, I'm convinced that in practice supporting the block direction has far fewer benefits than supporting the inline direction, so I've opted to support just the inline direction for now to avoid being blocked on the API and get this feature shipped so people can start benefitting from it today. We can always introduce support for the block direction separately in the future — no need for them to be introduced together and slow down the process.
Right now we are using the shortest names possible like ps-*
but if we eventually add block support and feel like that's too ambiguous, we can always support a more verbose version like p-is-*
so that the block direction equivalent can be p-bs-*
. My gut is that the block direction stuff will be needed so infrequently that simply making the block direction more verbose and keeping the inline ones terse is actually going to be the better trade-off though.
This PR does not include support for the logical values of clear
or float
, as browser support is currently poor. We can of course revisit this in the future and add them another day when support is better.