Using Tailwind Forms Plugin with React Select

Question

I am trying to integrate Select from react-forms with tailwind css and the tailwind forms plugin (@tailwindcss/forms).

With only tailwind and react-select, the form renders correctly. However, with the plugin, an outline appears. I would like for tailwindcss forms not to interfere with react-select styling. Is there an effective solution to allow react-select styles to override tailwind plugins?

Additionally, please let me know if there are any effective solutions for styling react-select forms using tailwind without resorting to other libraries, like emotion or styled-components.

Answer 1

You can set the box shadow to none for the input when focused

<Select
....
styles={{
  input: (base) => ({
    ...base,
    'input:focus': {
      boxShadow: 'none',
    },
  }),
}}

/>

Answer 2

Thanks @Bogdan for your answer, that indeed did the trick! 🎉

What comes to the author's second question, as of version 5.7.0, React Select allows styling with classes through the classNames prop. Here's an example of how it can be used (from their docs):

<Select
  classNames={{
    control: (state) =>
      state.isFocused ? 'border-red-600' : 'border-grey-300',
  }}
/>

I've recently styled React Select with Tailwind, and it worked as expected! I also used the unstyled prop to eliminate the default styling. Refer to the list of available components to target the parts you want to style. For what it's worth, I also wrote a detailed article on my implementation if that's of any help.

And oh, I also discovered an alternative method to override Tailwind forms plugin with the class styling approach. As the React Select input key targets the containing div of the actual input element, we can target the input element with Tailwind's arbitrary variants:

<Select
  classNames={{
    input: () => "[&_input:focus]:ring-0"
  }}
/>

I still prefer the original solution by Bogdan, though, as it's a bit clearer what's going on, but your preference may vary.