To Logical Tailwind (Tailwind CSS Logical Properties Transformer)

An online tool to convert Tailwind CSS classes in your components to their logical equivalents for RTL (right-to-left) support and, optionally, full logical properties support using the Logical Tailwind plugin.

Visit the tool: To Logical Tailwind

Introduction

This project aims to simplify the process of converting Tailwind CSS classes in your components to their logical equivalents for better RTL support and, if needed, comprehensive logical properties support using the Logical Tailwind plugin or Tailwind CSS v3.3+. It requires either Tailwind CSS v3.3 or higher, or the Logical Tailwind plugin in your project.

Plugin vs. Native Comparison

When it comes to logical CSS properties, you have two options: the Logical Tailwind plugin or the native Tailwind implementation. Here's a comparison to help you choose the right approach for your project:

• Logical Tailwind Plugin: The Logical Tailwind plugin offers comprehensive support for logical CSS properties. If your project requires full logical properties support, this plugin is the recommended choice. You can integrate it into your project and leverage its advanced capabilities.

• Native Tailwind Implementation: The native Tailwind implementation, available from Tailwind CSS v3.3 onwards, primarily focuses on RTL support. If your main goal is to support RTL languages without the need for full logical properties support, using the native implementation should suffice.

How to Install Locally

To run the To Logical Tailwind tool locally, follow these steps:

• Clone the repository

git clone git@github.com:Abhijit20112003/Logical-Tailwind-CSS.git

• Navigate to the project directory

cd to-logical-tailwind

• Install the dependencies using your preferred package manager. For example, with pnpm

pnpm install

• Start the development server

pnpm run dev

Usage

• Visit the To Logical Tailwind tool using the provided link: To Logical Tailwind.

• In the tool's interface, you can enter your Tailwind CSS classes that need to be converted.

• Choose whether you want to enable full logical properties support using the Logical Tailwind plugin.

• Click the "Convert" button to transform your classes to their logical equivalents.

• Copy the converted classes and use them in your components to achieve improved RTL support.

Contributing

Contributions to the To Logical Tailwind project are welcome! If you encounter any issues, have suggestions, or want to contribute enhancements, feel free to submit a pull request.