tailwind-auto-directions v1.0.2

Tailwind Auto Directions

This plugin helps you to convert your projects into right and left alignment without writing additional code for each direction. Values are controlled by the browser.

Example

If you want to always set the position of an absolute element based on direction, you should write:

<div class="absolute left-10 top-10 rtl:right-10">
    Absolute element
</div>

But by using start class you can use inset-inline-start. So we write like this

<div class="absolute start-10 top-10">
    Absolute element
</div>

In this way, in direction:rtl the element starts from the right side and in direction:ltr from the left side

Usage

Install tailwind-auto-directions with npm:

npm i tailwind-auto-directions --save

In tailwind.config.js add the following line to the plugin section. Change the plugin section of the tailwind.config.js file like this and add the tailwind-auto-directions plugin to this section

module.exports = {
  content: ["./src/**/*.{html,js}","./index.html"],
  theme: {
    extend: {},
  },
  plugins: [
    require('./tailwind-auto-directions') // <-- add this line
  ],
}

Usable classes