1.0.2 • Public • Published

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.


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

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

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


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

Class Description
ps-* padding start
pe-* padding end
ms-* margin start
me-* margin end
dir-rtl direction rtl
dir-ltr direction ltr
text-start algin text
text-end algin text
start-* inset algin (e.g instead of left:* in direction:ltr)
end-* inset algin (e.g instead of right:* in direction:ltr)
border-s-* border start width
border-e-* border end width
rounded-s-* border radius start
rounded-e-* border radius end
rounded-ts-* border radius top start
rounded-te-* border radius top end
rounded-bs-* border radius bottom start
rounded-be-* border radius bottom end
rounded-bs-* border radius bottom start
rounded-be-* border radius bottom end
float-start float inline-start
float-end float inline-end
clear-start clear inline-start
clear-end clear inline-end

Package Sidebar


npm i tailwind-auto-directions

Weekly Downloads






Unpacked Size

5.43 kB

Total Files


Last publish


  • homoro