CreatableSelect styling with Tailwind

[geduldig]

I am able to style Select with Tailwind classes using classNames. CreatableSelect doesn't appear to support the classNames prop. So, how does one style it using Tailwind classes?

[DeepHansda]

<Select
        id="filter"
        isSearchable
        isClearable
        required
        isLoading={isLoading || isFetchingNextPage}
        value={value}
        captureMenuScroll
        onChange={(newValue: unknown, actionMeta: ActionMeta<unknown>) =>
          setFilters({
            ...filterItems,
            [keyName]: (newValue as FilterOptionType)?.value || "",
          })
        }
        options={[{ label: "None", value: "" }, ...filterOptions]}
        placeholder={`Select ${label}`}
       // className prefix for the select
        classNamePrefix="react-select"
       // className for the select
        className="select-style"
        onMenuScrollToBottom={handleScrollToBottom}
      />

you have to must add the classNamePrefix and className

styles.css

/* styles.css */

/* Container */
.select-style .react-select__control {
  @apply rounded-md border border-border dark:border-darkborder bg-transparent dark:bg-transparent w-full text-sm;
}

.select-style .react-select__control--is-focused {
  @apply border-primary shadow-sm;
}

/* Dropdown menu */
.select-style .react-select__menu {
  @apply rounded-md border border-border dark:border-darkborder bg-white dark:bg-darkgray shadow-md dark:shadow-dark-md;
}

/* Individual option */
.select-style .react-select__option {
  @apply text-dark dark:text-white cursor-pointer capitalize;
}

.select-style .react-select__option--is-focused {
  @apply bg-primary text-white;
}

.select-style .react-select__option--is-selected {
  @apply bg-primary text-white font-bold;
}

/* Selected value */
.select-style .react-select__single-value {
  @apply text-dark dark:text-white;
}

/* Input field inside control */
.select-style .react-select__input {
  @apply text-dark;
}