Using Tailwind Forms Plugin with React Select

user_3906483 0
Viewed 4963

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?

enter image description here

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.

react-select tailwind-css reactjs css
3 Answers

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

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

/>
user_26336020

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.

The answer to this is to use this library https://github.com/ben-rogerson/twin.macro

Example, you can do something like this:

import tw from 'twin.macro';
import ReactSelect, { Props } from 'react-select';

const Styled = {
  Select: tw(ReactSelect)`rounded-lg text-center border-2`
};

const Select: React.FC<Partial<Props>> = (props) => {
  return (
    <Styled.Select {...props} />
  );
};
user_40154500

You could use the class strategy for the plugin, it will disable the extra styling, but you will need to implement the form-* class to every other input.

Here is the documentation for it.

user_163766150
Related