Inconsistent Behavior for Positioning Classes in Tailwind

[theharush]

Currently, Tailwind CSS allows the addition of custom positioning classes using the format {position}-{value}. For example, we can add the class left-[150px] to produce the CSS left: 150px;. However, this behavior is inconsistent when it comes to the right property.

Expected Behavior:
I expect that adding a class like right-[150px] should produce the CSS right: 150px;, similar to how the left property works.

Actual Behavior:
Adding a class with the format right-[150px] does not produce the desired CSS output of right: 150px;. Instead, the class is ignored, and the right property remains unaffected.

Furthermore, Tailwind CSS supports local variables like start and end which should automatically adjust based on the set direction (e.g., ltr or rtl). These variables can be used in class names, such as {position}-{variable}. However, similarly to the 'right' issue, they also do not support that format.

Proposed Solution:
To ensure consistent behavior and enhance flexibility, I propose the following improvements to Tailwind CSS:

Implement support for the right property, similar to how the left property works when using the {position}-{value} class format, as well as to the 'start' and the 'end' properties.

By implementing these changes, Tailwind CSS can provide a more comprehensive and consistent solution for positioning elements in various layout scenarios, especially in localized environments

Thank you for considering these improvements.

[wongjn]

Tailwind does support the arbitrary value format for right-*, start-* and end-* class utilities as evidenced by this Tailwind Play (open the Generated CSS panel). If these do not work in your project, it could be a symptom of some misconfiguration or misuse.

[theharush]

You are absolutely right! thanks for the swift reply too.