How to use a specific direction as varient?

[sarmad4444]

How can I achieve something like:

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

[rant989]

+++++++

[RonMelkhior]

Hi,

This plugin doesn't translate well into CSS (seeing as how you can't @apply variants).

What I did to get around this in my own personal projects, is add a scss mixin:

@mixin ltr {
    [dir='ltr'] & {
        @content;
    }
}

@mixin rtl {
    [dir='rtl'] & {
        @content;
    }
}

.field {
    @include ltr() {
        @apply ml-12;
    }

    @include rtl() {
        @apply mr-12;
    }
}

[jzabala]

I would like to have this feature too. Are you accepting PRs @RonMelkhior? I wouldn't mind to add it.

[RonMelkhior]

I would like to have this feature too. Are you accepting PRs @RonMelkhior? I wouldn't mind to add it.

Hi!

Do you mean adding variant support in @apply? Or adding some helpers to the PostCSS side?

I'd love to accept a PR for it, but depending on your implementation it might fit better in it's own repo so people who don't use tailwind can enjoy it. If your implementation will be pretty Tailwind-specific then of course :)

[jzabala]

Hi!

Do you mean adding variant support in @apply? Or adding some helpers to the PostCSS side?

I'd love to accept a PR for it, but depending on your implementation it might fit better in it's own repo so people who don't use tailwind can enjoy it. If your implementation will be pretty Tailwind-specific then of course :)

hi @RonMelkhior

My idea is just adding the additional variants (rtl and ltf) to allow what was initially proposed in this issue:

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

By default I program my styles in ltr and only needs the variant for rtl. What do you think?

[RonMelkhior]

I doubt you can change @variant rtl to work like that since @variant is a Tailwind directive. If it's possible sure but I'd just create a custom PostCSS directive independent of Tailwind

[jzabala]

I doubt you can change @variant rtl to work like that since @variant is a Tailwind directive. If it's possible sure but I'd just create a custom PostCSS directive independent of Tailwind

I think it is not possible right now because only the direction variant is being registered in tailwind. I created a PR to add the other variants. Let me know what do you think 🙂

[RonMelkhior]

Thanks! I'm unfortunately not home until Friday, so I'll only be able to merge it then.

[jzabala]

Thanks! I'm unfortunately not home until Friday, so I'll only be able to merge it then.

Sure, when you have time. Thanks @RonMelkhior