[▲ Vercel Community](/) · [Categories](/categories) · [Latest](/latest) · [Top](/top) · [Live](/live)

[Showcase](/c/showcase/41)

# AI prompt to convert Tailwindcss LTR -> RTL

210 views · 11 likes · 6 posts


Jonoroboto (@jonoroboto) · 2024-08-07 · ♥ 4

We've been trying to find a quick way to handle LTR -> RTL styling for [Roboto Studio](https://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](https://www.cursor.com/) 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.


Amy Egan (@amyegan) · 2024-08-07 · ♥ 1

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


Jonoroboto (@jonoroboto) · 2024-08-08 · ♥ 2

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: https://gist.github.com/jonoroboto/e9a3f0254057dc47b1fd9052988bdf84


Pauline P. Narvas (@pawlean) · 2024-08-08 · ♥ 1

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


Jonoroboto (@jonoroboto) · 2024-08-08 · ♥ 1

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 (@jonoroboto) · 2024-08-08 · ♥ 2

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