20lives/tailwindcss-rtl

Size variation priority

AmirHosseinKarimi opened this issue · 6 comments

AmirHosseinKarimi commented

Hi, I have a scenario which I need set text align to start by default and set it to center on SM break-point.
So set these class: text-start sm:text-center
The result is not correct:
Screenshot from 2021-03-12 15-23-50

The text-start will override sm:text-center

20lives commented

Nice catch.
I Will try to think of a solution

  • 👍1
20lives commented

Adding the following to textAlignUtilities.js solves this specifically, but this could be pretty expensive when adding to all utilities without directions.

'[dir] .text-center': { 'text-align': 'center' },
AmirHosseinKarimi commented

@20lives Thanks for quick fix solution, I just handled it by is_rtl() condition for temporary hot fix in this specific scenario.
I just think about it, what about disable Tailwind core text align plugin and extend it via direction prefix to fix rules priority in variations?

20lives commented

I don't think it's possible to remove existing utilities with plugins

AmirHosseinKarimi commented

But can mention it on documentation which need manually do it to fix the issue?

20lives commented

I am not planning on leaving it that way :)

  • 👍1