"rtl" style for the select element

[let-lc]

What version of @tailwindcss/forms are you using?

v0.3.4

What version of Node.js are you using?

v14.0.0

What browser are you using?

Chrome, Firefox

What operating system are you using?

Windows

Reproduction repository

https://github.com/let-lc/tailwindcss-forms/tree/rtl-issue-reproduction

Describe your issue

I recently work on a project that needs to change the direction to "rtl" when changing the site language to Arabic, and the project has the tailwindcss-forms plugin installed. I noticed all the form elements I used are rendering "rtl" normally except the <select> element.

A raw, no styles select element with "rtl" direction displays the chevron down icon on the left side, shows here https://play.tailwindcss.com/lORpOqPWap. However, the tailwindcss-form plugin always has the icon displaying on the right side.

In the reproduction branch, I set the "Unstyled" section to "rtl" to show the issue.

I think we should have the select element resemble the "rtl" style of a raw,no styles select element by putting the chevron icon on the left side. I currently overrided some styles of the tailwindcss-form to fix the issue in my project, but I think this should be supported by the plugin natively.

I already worked on a solution and ready to submit a PR, but I know the contributing guidelines is issue first then PR, so here's description for the issue.

And here is the "ltr" and "rtl" comparison I worked on:

[y1n0]

Yes please, this is basically a bug, it should be fixed
here is how it displays a select element for me in ltr vs rtl:


the arrow should always be in the end of the line

[adamwathan]

Hey! Right now we don't explicitly support RTL layouts automatically. If you'd like to customize the default styles, the recommendation is to just write custom CSS.

If your entire site is RTL, you can override the default position for the chevron with something like this:

@layer base {
  select {
    background-position: left theme('spacing.2') center;
    padding-left: theme('spacing.10');
    padding-right: theme('spacing.3');
  }
}

If your site supports both RTL and LTR layouts, you could do something like this:

@layer base {
  :where([dir="rtl"]) select {
    background-position: left theme('spacing.2') center;
    padding-left: theme('spacing.10');
    padding-right: theme('spacing.3');
  }
}

Note the use of :where to keep the specificity low so that you can still override these values with utility classes when needed.

Open to looking at a PR to make this all work automatically but what I've outlined here is what I would recommend in the mean time 👍🏻

Going to close for now since this is the expected behavior (since we don't explicitly support RTL at this time), but hope this helps.