Hi..

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: [
    require('tailwindcss-dir')(),
  ]
}

Hi, I have a simple style:

LTE

RTL

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!

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.

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 ?

npm install tailwindcss-dir --save-dev

in tailwind.config.js - added

variants: {
         padding: ['responsive', 'direction'],
},
plugins: [
	require('tailwindcss-dir')(),
],

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

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>
</div>

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.

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: [
    require('tailwindcss-dir')(),
],
    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?

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};

Hello,

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?

works:
- last:mr-0
- lg:last:mr-0

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

tailwind.config.js

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

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...

Bumps mixin-deep from 1.3.1 to 1.3.2.

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.

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

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.

Hi,

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?

Thanks