AI prompt to convert Tailwindcss LTR -> RTL

[jonoroboto]

We’ve been trying to find a quick way to handle LTR → RTL styling for Roboto Studio and we came across a bit of a banger of a way to handle it through a prompt. This is especially useful in a tool like Cursor because you can usually one-shot this without too much of an issue. It’s also especially helpful as it’s direction agnostic meaning you don’t have to throw a bunch or RTL or LTR modifiers.

If this helps anyone, or anybody has any improvements, we’d love to hear them!

— Prompt —
Whenever I mention internationalisation and frontend, please take any of the following and convert to the ltr/rtl agnostic version below
left ➜ start
right ➜ end
ml ➜ ms
mr ➜ me
pl ➜ ps
pr ➜ pe
border-l ➜ border-s
border-r ➜ border-e
text-left ➜ text-start
text-right ➜ text-end
float-left ➜ float-start
float-right ➜ float-end

Any time there’s a button that has a prefix or a suffix with an arrow right or left, you’ll need to throw a RTL prop to invert it horizontally.

[amyegan]

Beautiful solution. Thanks for sharing it! I’m sure lots of people will find it helpful

[jonoroboto]

We ended up writing up a little article here: https://roboto.studio/blog/handling-ltr-rtl-frontend

If you’d like to see the full prompt we use, we actually have a gist that we keep up to date for Next.js, Tailwind, LTR/RTL & Sanity: prompt-engineer-lol · GitHub

[pawlean]

The link goes to a 404, @jonoroboto Wrong link?

[jonoroboto]

Thanks for the catch! Of course we broke the build just before pushing this out, playing around with typescript generation. Will keep you updated, should be fixed in the next half hour and link above will work!

[jonoroboto]

Guess what’s up and running! Turned out to be a type error with subcategories… Going to record some of this in action with our migration to RTL