tailwindcss icon indicating copy to clipboard operation
tailwindcss copied to clipboard

Add logical properties support for inline direction

Open adamwathan opened this issue 1 year ago • 6 comments

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.

adamwathan avatar Dec 23 '22 19:12 adamwathan