add "rtl" styles for select element

[let-lc]

Fixes #86

The change can be tested by changing index.html's main <div> dir property to "rtl".

[vercel]

This pull request is being automatically deployed with Vercel (learn more).
To see the status of your deployment, click below or on the icon next to each commit.

🔍 Inspect: https://vercel.com/tailwindlabs/tailwindcss-forms/EPXv4wvBMtyfvyVVPepRAu2XvhZr
✅ Preview: https://tailwindcss-forms-git-fork-let-lc-select-rtl-tailwindlabs.vercel.app

[reinink]

Hey thanks for this contribution!

So while this seems like a good addition, we haven't actively pursued RTL support in Tailwind CSS yet. That said, we have added new rtl and ltr variants in the upcoming v3.0 release, so timing wise it might make sense for us to also support this in the forms plugin.

However, if we do, we'll want to make sure other inputs are working properly too. One issue I see is with the checkboxes, but I think that's actually not related to this plugin, and only the demo implementation.

[let-lc]

One issue I see is with the checkboxes, but I think that's actually not related to this plugin, and only the demo implementation.

Yes, the gap is the margin spacing from the label. The checkbox should be fine.

So far other input elements supported by this plugin work fine on "rtl" direction as I checked. The select element works fine also, and the style is okay, but I think it should resemble the behavior of the native select element which the chevron icon should switch position when switching to "rtl" direction. I am no expert on the "rtl" subject either, but this is one thing I spotted during a development of a "rtl" required site and I think this can be a minor improvement to the plugin.

As always, big thanks to the Tailwind team for this awesome framework, can't way to see the official release of TailwindCSS 3.0.

[mohamedsabil83]

Came to make the same PR and found this 😄. I did the same thing in another project using this package. (filamentphp/filament#961)

Hope to merge it soon as I need it for many projects.

[danharrin]

Thanks for this fix @let-lc!

As someone who maintains an open source project with RTL support, this really helps us reduce the custom CSS we're using.

[adamwathan]

Hey thanks for the contribution! Unfortunately I am going to close this because the proposed solution has a few issues:

1. The selector [dir="rtl"] select has a specificity of 011 which means it can't be overridden with utility classes.
2. The style provided for the class strategy aren't scoped to RTL layouts, so if I merged this the chevron would be on the wrong side even on LTR sites.

Definitely not opposed to adding support for this if the solution is sound, but unfortunately this PR isn't quite where it needs to be in its current state. Right now I personally have higher priority things I need to work on so can't invest any time into this issue myself, but happy to look at another PR that adds support for this without introducing any other issues.

Thanks for the contribution regardless, I appreciate it! ❤️