Add variant for ::file-selector-button pseudo element

[lukewarlow]

This PR adds a variant for the ::file-selector-button pseudo element, which is supported by the latest versions of all three engines.

I think I've added to the relevant tests but feel free to point out any others that are required.

[mainej]

+1 I'd love to have this too. Would address tailwindlabs/tailwindcss-forms#25

[lukewarlow]

https://play.tailwindcss.com/dAUlXDZt6r - In the meantime a simple plugin like this can address the basic use cases.

Though it doesn't play well with other variants (like hover). My knowledge of tailwind's plugin API isn't good enough to work out why. Potentially, you'd need to fall down into using the raw postcss API mentioned here https://tailwindcss.com/docs/plugins#complex-variants.

[mainej]

@lukewarlow nice! Your Tailwind Play example uses the older style of defining plugins. I updated it to use the JIT-influenced style of defining plugins, which is what you have in this PR. Now it seems to work with other variants like hover: https://play.tailwindcss.com/Bgd6hn9eI9. (For some reason, the updated Play version works for me on Chrome, but not Firefox. In any case, it should work in a real project.)

I still think this makes sense in the core library, but in the meantime, it's nice to have a quick plugin. Thanks for the inspiration.

[lukewarlow]

I agree it makes sense as a core feature. Thanks for working that one out, will be useful in some projects of mine! Odd it doesn't work in Firefox but seems to work in Chrome and Safari. And most people are gonna be using it in a build system anyway so not really an issue.

Edit: it only works in Safari TP not standard Safari. Presumably this relies on some modern browser feature.

[reinink]

Hey thanks for this PR @lukewarlow, didn't know about this feature! Let's go with just file since file-selector-button is a bear to type 😅 I've also added a test for combining this with hover, which works perfect in the new JIT mode 👍 Thanks again!

[colbyhemond]

For those that end up here looking for the solution (like myself), here's a link to the section of the tailwind docs that mentions styling file input buttons: https://tailwindcss.com/docs/hover-focus-and-other-states#file-input-buttons