20lives/tailwindcss-rtl

Fix to make select dropdown arrow show on left side when using tailwindcss-forms

mattlangeman opened this issue · 1 comments

I ran into an issue with making the arrow for the select dropdown show on the left side of the box with for rtl languages. This is an issue specific to the tailwindcss-forms plugin as it adds in the arrow as a background image.

Tailwind_Select_Box_nofix

Not sure if tailwindcss-rtl is the right place for this but here is the quick fix I made.

[dir="rtl"] select {
    background-position: left 0.5rem center;
    padding-left: 2.5rem;
}

Tailwind_Select_Box_rtl

Adding these lines works fine

@20lives
consider adding this

[dir="rtl"] .form-select {
    background-position: left 0.5rem center;
}

/* For those who use it direct */

[dir="rtl"] select {
    background-position: left 0.5rem center;
}