styling react-select component using tailwindcss – React-select

The Solutions:

Solution 1: Using the classNames prop

Use the classNames prop provided by react-select to add custom CSS classes to the CreatableSelect component. This allows you to apply the same styling used for other input elements in your application.

import { CreatableSelect } from 'react-select';

const TypeaheadSelect = () => {
  const values = [
    { id: 1, name: 'Netflix' },
    { id: 2, name: 'Amazon Prime' },
    { id: 3, name: 'Hulu' },
    { id: 4, name: 'HBO' },
    { id: 5, name: 'Disney+' },
  ];

  const [selectedOption, setSelectedOption] = useState(null);

  const companyOptions = values.map(company => ({ value: company.id, label: company.name }));

  const handleChange = selectedOption => {
    setSelectedOption(selectedOption);
    console.log(`Selected Option: ${selectedOption.label}`);
  };

  return (
    <CreatableSelect
      className="customInput"
      options={companyOptions}
      onChange={handleChange}
      value={selectedOption}
    />
  );
};

In your CSS, define the custom input styles using the customInput class:

.customInput {
  background-color: #f7fafc;

  @apply text-sm border-2 border-gray-200
  rounded-sm px-4 py-2.5 text-gray-800 tracking-wide focus-visible:outline-white
  focus:ring-2 focus-visible:ring-green-500 focus-visible:ring-offset-2
  transition-all duration-300 ease-in-out;
}

Solution 2: Using the components prop

The components prop allows you to customize the entire rendering of the CreatableSelect component. This gives you more fine-grained control over the styling and behavior.

import { components } from 'react-select';

const CustomControl = ({ children, ...props }) => {
  return (
    <div
      {...props}
      className="customControl"
    >
      {children}
    </div>
  );
};

const CustomOption = ({ children, ...props }) => {
  return (
    <div
      {...props}
      className="customOption"
    >
      {children}
    </div>
  );
};

const TypeaheadSelect = () => {
  const values = [
    { id: 1, name: 'Netflix' },
    { id: 2, name: 'Amazon Prime' },
    { id: 3, name: 'Hulu' },
    { id: 4, name: 'HBO' },
    { id: 5, name: 'Disney+' },
  ];

  const [selectedOption, setSelectedOption] = useState(null);

  const companyOptions = values.map(company => ({ value: company.id, label: company.name }));

  const handleChange = selectedOption => {
    setSelectedOption(selectedOption);
    console.log(`Selected Option: ${selectedOption.label}`);
  };

  return (
    <CreatableSelect
      components={{
        Control: CustomControl,
        Option: CustomOption,
      }}
      options={companyOptions}
      onChange={handleChange}
      value={selectedOption}
    />
  );
};

In your CSS, define the custom control and option styles using the customControl and customOption classes:

.customControl {
  background-color: #f7fafc;

  @apply text-sm border-2 border-gray-200
  rounded-sm px-4 py-2.5 text-gray-800 tracking-wide focus-visible:outline-white
  focus:ring-2 focus-visible:ring-green-500 focus-visible:ring-offset-2
  transition-all duration-300 ease-in-out;
}

.customOption {
  color: #2d3748;
  background-color: #f7fafc;
}

Video Explanation:

The following video, titled "React Select Example | React Dropdown Menu - Fully Customizable ...", provides additional insights and in-depth exploration related to the topics discussed in this post.

Here is a React select example with different use cases. We will build React select with a single value, React multiselect with an array and ...