[5.x] Reverse spaces in RTL

[peimn]

The Super button uses space-x-4, which has not been styled for RTL layout.

[jackmcdade]

Why are we overriding space- utilities to do margins? I didn't realize this was even in there. We should be able to remove it entirely. The whole point of using them is to put space between items — I really really really don't like setting rtl:mr-2 and ltr-ml-2 stuff everywhere when you can just use space-x-2 on the container.

[peimn]

Exactly. My solution is not to replace space-* with m[r/l]-*!

The class space-x-4 is used here in buttons.css in your latest update for the super button:

.super-btn {
    @apply p-4 flex items-start hover:bg-gray-200 border border-transparent rounded-md space-x-4;
.
.
.

[peimn]

Additionally, your idea to replace all margins with spaces will reduce the number of classes and keep the code clear and concise.
I can implement this change if you believe it is a better approach for the RTL layout.

[jackmcdade]

Right, but what's going on the rtl.css file? Shouldn't the space-x- classes handle the spacing without any adjustment on our part? Maybe I'm confused and going too quick just looking at code rather than experimenting...

[jasonvarga]

I think the issue here is the question... Why are we doing this >:not([hidden])~:not([hidden]) stuff?

[peimn]

Aha, I understand! Tailwind calculates spaces on the left side, so as you can see here, we move the calculation to the right.

/* LTR tailwind */
.space-* {
    margin-right: calc(**rem* var(--tw-space-x-reverse));
    margin-left: calc(**rem* calc(1 - var(--tw-space-x-reverse)));
}
/* RTL tailwind */
.space-* {
    margin-left: calc(**rem* var(--tw-space-x-reverse));
    margin-right: calc(**rem* calc(1 - var(--tw-space-x-reverse)));
}

[jasonvarga]

How about this? tailwindlabs/tailwindcss#2017 (comment)

[peimn]

I didn't know that! I first found a solution and then copied and pasted it. I will update code!

[jackmcdade]

It would be really nice if tailwind just automatically flipped it for you in RTL mode! TIL how space-x actually works 😅

[jackmcdade]

Maybe those rtl.css classes are the simplest solution 🤔

[jackmcdade]

There's also this https://github.com/20lives/tailwindcss-rtl

[peimn]

Two or three weeks ago, I did the same thing for another project and replaced all left and right elements with start and end. I think I'll apply the same approach for Statamic, but I've previously implemented RTL for Statamic months ago using this method of finding the first solution and implementing it! I'm uncertain whether all the plugins for RTL are functioning smoothly, as I've tested them and haven't found a complete solution. I tend to focus heavily on details, which might contribute to the challenge. However, I haven't tried testing this one yet!

[peimn]

@jackmcdade I've converted classes to start, end variant, seems that most of the layout is ok except a few elements like bg-gradients, we can keep them as they are before and convert others to simples version. I need to investigate further to ensure everything is okay. Once I'm certain, I'll push the changes.

[jackmcdade]

@peimn is this ready for review?

[peimn]

Yes, it is ready. This update only addresses the reverse issue. I will send a separate pull request to handle the removal of ltr: rtl: stuff and replace them with CSS rules and Tailwind classes.