3 ms·
The symmetric bit is a good idea. I recently joined a team that maintains a multilingual LTR/RTL site so I'm learning some of these lessons the hard way. Paddi
by yurishimo 4y ago
The symmetric bit is a good idea. I recently joined a team that maintains a multilingual LTR/RTL site so I'm learning some of these lessons the hard way.
Padding > Margin can also be a good idea, even if working vertically. Padding cannot collapse which is usually what you want. Obv, ymmv.
- alayek 4y agoAt work, we've built a component library styling readily available headless components from Radix UI, Headless UI, Reach UI etc. with a customized Tailwind CSS preset. We had to use `rtl:` directive only in one component, where we were animating translation property, of a switch toggle. `translation-x-` is RTL specific, so we've to apply negative translation if `dir="rtl"` has been set. Otherwise, this symmetric-utilities-only approach worked really well across dropdowns, modals, tooltips, buttons, inputs etc., even when we integrated these components in different existing products across multiple teams. I hope one day Tailwind CSS team release an update with underlying CSS for px-, mx-* being replaced with CSS logical operators for corresponding properties. Not sure where the browser support for the same is currently.