Function Template

storybook/stories/ClassNamesWithTailwind.stories.tsx:33–62

({
  inputId = 'react-select',
  ...props
})

};

const Template: ComponentStory<typeof Select> = ({
  inputId = 'react-select',
  ...props
}) => {
  return (
    <EmotionCacheProvider>
      <Field htmlFor={inputId} label="ClassNames With Tailwind">
        <Select
          inputId={inputId}
          {...props}
          classNames={{
            control: ({ isDisabled, isFocused }) =>
              classNames(
                !isDisabled && isFocused && 'border-purple-800',
                isFocused && 'shadow-[0_0_0_1px] shadow-purple-800',
                isFocused && 'hover:border-purple-800'
              ),
            option: ({ isDisabled, isFocused, isSelected }) =>
              classNames(
                isSelected && 'bg-purple-800',
                !isSelected && isFocused && 'bg-purple-300',
                !isDisabled && isSelected && 'active:bg-purple-800',
                !isDisabled && !isSelected && 'active:bg-purple-500'
              ),
          }}
        />
      </Field>
    </EmotionCacheProvider>
  );
};

export const ClassNamesWithTailwind = Template.bind({});
ClassNamesWithTailwind.args = {