Missing inline and block utilities #10776

yousifalraheem · 2023-03-11T19:36:23Z

yousifalraheem
Mar 11, 2023

Description

I'm trying to develop a web app using Tailwind CSS with support to 2 languages: English and Arabic. However, I noticed that tailwind is missing the direction friendly CSS properties.

Examples:

/*
  This renders a padding on the left.
  It's great if you're site only expects the direction to be LTR
*/
padding-left: 1rem;

/*
  This will yield the same results as the one before.
  The difference is that it will behave as intended when switching the direction of the document to RTL
*/
padding-inline-start: 1rem;

I expect to have CSS utilities that supports both directions. An example of a new utility:

/* pis-1 */
padding-inline-start: 1rem;

You can also replace the implementation of these class names:

/* px-1 */
- padding-left: 1rem;
- padding-right: 1rem;
+ padding-inline: 1rem;

/* py-1 */
- padding-top: 1rem;
- padding-bottom: 1rem;
+ padding-block: 1rem;

/* rounded-t */
- border-top-left-radius: 0.25rem;
- border-top-right-radius: 0.25rem;
+ border-start-start-radius: 0.25rem;
+ border-start-end-radius: 0.25rem;

To see what I mean, you can open any site (even Tailwind official website) and apply this attribute to the body

<body dir="rtl">

All the spacing will appear to be on the other side. But if there were developed with inline and block in mind, this issue wouldn't happen.

wongjn · 2023-03-11T23:23:16Z

wongjn
Mar 11, 2023

There is support for logical properties in the inline direction via #10166 that you could try via insiders, npm install tailwindcss@insiders

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Missing inline and block utilities #10776

{{title}}

{{editor}}'s edit

{{editor}}'s edit

Replies: 1 comment

{{title}}

Select a reply

Missing inline and block utilities #10776

yousifalraheem Mar 11, 2023

Description

Replies: 1 comment

wongjn Mar 11, 2023

yousifalraheem
Mar 11, 2023

wongjn
Mar 11, 2023