# Convert Tailwind Components to Logical Tailwind with This Tool

I love coding but if I have to spend half just fighting with the UI to get things looking as I want, then I don't feel very productive. This why I always love to find *copy-past* starting points from places like [TailwindUI](https://tailwindui.com/) of [Flowbite](https://flowbite.com/), to help move faster. However, almost always these components are built to work with Left-to-Right (LTR) direction. So what happens when these components are integrated into websites that need to support Right-to-Left (RTL) languages like Arabic? Often, they break.

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1689932249103/3687fe0e-7168-4cb2-8523-88c2b50916b0.png align="center")

## **Why does this happen?**

This happens when a component use Non-logical CSS like `padding-left`, `margin-right`, `top-5` and much more. Non-logical properties include `width` and `height` which can break designs for languages that are Top-To-Bottom (TTB).

However, Both Flexbox and Grid are designed logically, allowing them to function correctly irrespective of the direction. This explains why some parts of the design, such as the spacing between icons and links, display correctly in both LTR and RTL.

New CSS properties have been introduced to address these issues, creating a more logical user interface. For instance, `padding-start` was introduced to correspond to `padding-left` in RTL, while `block-size` was developed to match `height`. Many more logical CSS properties have been developed. [A complete list of these properties can be found here](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_logical_properties_and_values).

## **Introducing** [***to-logical -tailwind***](https://to-logical-tailwind.fawwaz.dev/)

Lucky for us the TaiwlindCss ecosystem for a while had a [plugin](https://github.com/stevecochrane/tailwindcss-logical) that added support to logical Css in Taiwlind. Also more recently TaiwlindCss added native support to RTL with [V3.3 release](https://tailwindcss.com/blog/tailwindcss-v3-3). To-logical-tailwind, support both output formats and converts any tailwind component to a "logical-tailwind" component.

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1689930080066/46bcaf66-6d7c-486a-addc-944a04911cdc.jpeg align="center")

## **Conclusion**

You can start using [to-logical-tailwind](https://to-logical-tailwind.fawwaz.dev/) today, and the code for the project is open-source and you can find it [here](https://github.com/Fawwaz-2009/to-logical-tailwind). Happy hacking and feel free to open an issue if you need any help 🤓.