Adds direction (LTR, RTL) variants to your Tailwind project

  • By Ron Melkhior
  • Last update: Nov 30, 2022
  • Comments: 14

Tailwind Direction

Total Downloads Latest Release

Tailwind Direction adds a custom direction variant to your tailwind project, letting you have custom CSS rules for LTR and RTL layouts.

Note: This package requires Tailwind >= v1.0.1.

Getting started

Install the package via NPM/Yarn.

# Yarn
yarn add tailwindcss-dir --dev

npm install tailwindcss-dir --save-dev

Now, setup the plugin in your Tailwind config's plugins section. Currently the plugin doesn't offer any configuration.

plugins: [

Finally, you can use the plugin and add it to modules you want to use it with.

variants: {
	float: ['responsive', 'direction'],
	margin: ['responsive', 'direction'],
	padding: ['responsive', 'direction'],


The plugin adds ltr and rtl variants to your modules. With the default Tailwind configuration, you can use them like so:

<div class="text-green text-2xl ltr:pl-4 rtl:pr-4">
	Hello world.


Tailwind Direction is licensed under the MIT license.



  • 1

    rtl: and ltr: doesn't work


    I installed tailwind in my project (laravel) using tailwind-preset and then installed tailwindcss-dir following the installation steps. but both ltr: and rtl: is not working

    my tailwind.config.js:

    module.exports = {
      theme: {
        extend: {}
      variants: {
        float: ['responsive', 'direction'],
        margin: ['responsive', 'direction'],
        padding: ['responsive', 'direction'],
        textAlign: ['responsive', 'direction'],
      plugins: [
  • 2

    Support right and left ?

    Hi, I have a simple style:

    LTE Screen Shot 2021-04-09 at 3 22 14 PM

    RTL Screen Shot 2021-04-09 at 3 23 33 PM

    With this code:

    <span class="absolute inset-y-0 lte:left-0 rtl:right-0 w-1 bg-indigo-600 rounded" aria-hidden="true"></span>

    It is worked with lte but rtl the right arrow does not work!

  • 3

    How can I set border to rtl and ltr direction ?

    How can I set Border to rtl and ltr direction ? for example: <input class="w-5/6 sm:w-11/12 border-b-0 border-t-0 ltr:border-l-0 rtl:border-r-0 p-3 ltr:float-left rtl:float-right rounded-none" type="search" name="search" id="search" >

    In the above code ltr:border-l-0 rtl:border-r-0 does not work.

  • 4

    tailwindcss-dir rules removed on build

    Hey, First thanks for this great plugin.

    I'm experiencing a weird issue, when deploying my application the ltr and rtl rules are not in the builded css. I suspect purgeCss to be responsible of this. I tried to add some new rules in purgecss whitelist in the tailwind.conf but that didn't work. Any idea how to solve this ?

  • 5

    Error: Couldn’t find Tailwind screen: ltr

    npm install tailwindcss-dir --save-dev

    in tailwind.config.js - added

    variants: {
             padding: ['responsive', 'direction'],
    plugins: [

    And added ltr:px-4 rtl:px-2 in some component

  • 6

    Added support to the same level dir attribute

    Thank you so much for this awesome plugin

    I figured that sometimes I need to add some specific styling to the same level div I added the dir="rtl" attribute to it. as follows:

    <div className="border p-2 ltr:pl-4 rtl:pr-4" dir="rtl">
      <h1 className="font-bold text-2xl">This it RTL Text</h1>
      <p>Lorem Ipsum ...</p>

    but the css is targeting only the next level items:

    [dir='rtl'] .rtl\:pr-4 {
      padding-right: 1rem;
    [dir='ltr'] .ltr\:pl-4 {
      padding-left: 1rem;

    so I added the also the needed selector:

    [dir='rtl'] .rtl\:pr-4,
    [dir='rtl'].rtl\:pr-4 {
      padding-right: 1rem;
    [dir='ltr'] .ltr\:pl-4,
    [dir='ltr'].ltr\:pl-4 {
      padding-left: 1rem;

    Thanks again.

  • 7

    I couldn't use it

    Hi, I flow document. But it don't work yet. I am using Vue and tailwind within laravel. I added this to tailwind.config.js:

    plugins: [
        modules: {
    	float: ['responsive', 'direction'],
    	margin: ['responsive', 'direction'],
    	padding: ['responsive', 'direction'], 

    But when I added the `rtl:pr-4' in my element it dose not work. What should I do?

  • 8

    It doesn't work unless adding a backslash

    Thank you for this plugin,

    I am testing it with the latest version of tailwindcss ( v1.0.0-beta.4 )

    After playing with it, it doesn't work unless adding a backslash ( \ ) before the separator: return [dir="${dir}"] .${dir}\\${separator}${className};

  • 9

    Use dir with :last and :first variants


    Is there a way to use dir variants with last or first variants? I've tried various way and can't make it work. Any ideas?

    - last:mr-0
    - lg:last:mr-0
    doesn't work:
    - rtl:last:mr-0
    - lg:rtl:last:mr-0


    variants: {
       margin: ({ after }) => after(['direction', 'last', 'first']),
  • 10

    Use `margin-inline` instead

    First of all - Thank you! Great project!

    For margin, padding, borders etc:

    I think it would be better to use margin-inline-start & margin-inline-end [same for padding etc.] instead of adding dir variants.

    The advantage of this approach:

    1. Write less code: write only one class that will handle both directions.
    2. Smaller bundle size: no need to generate all the variants...
  • 11

    Bump mixin-deep from 1.3.1 to 1.3.2

    Bumps mixin-deep from 1.3.1 to 1.3.2.

    Maintainer changes

    This version was pushed to npm by doowb, a new releaser for mixin-deep since your current version.

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.

    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot ignore this [patch|minor|major] version will close this PR and stop Dependabot creating any more for this minor/major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

  • 12

    not working when used via @apply in style file

    As mentioned in the title, when used with @apply, given classes are not added to the template.

    example use case:

    .action-btn-label{ @apply ps-font-medium ps-text-ghost-blue rtl:ps-text-xl; }

    the first two classes are added to the item but not ps-text-xl

  • 13

    Add same level option

    I wasn't really sure what to name the option but I went with sameLevel. I tested it out in my project and confirm it's working there as well. Let me know if you want any changes.

  • 14

    versioning question


    Increasing the major version often implies there are breaking changes, but i can't tell outright from the commits whether this is the case.

    Are you using a specific versioning strategy like semver?