ronmelkhior / tailwindcss-dir Goto Github PK

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

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

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

How can I use direction with responsive variants? Is it even possible?

I try

How can I achieve something like:

@variant rtl {
    .menu-collapsed {
        @apply border-l;
    }
}

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.

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?

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!

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 ?

Hello, is it possible to use this plugin in Windicss and its Typography plugin?
I want to have RTL support for prose class.

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

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')(),
  ]
}

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

on adding direction to inset in next js 10 project its fails with open square brackets

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']),
}