Styling with TailwindCSS

[JuanM04]

Is there a way to style all the components with TailwindCSS?

[ebonow]

Custom components have a common prop which can be set called className which can be used to style the individual components.

Jed has expressed a strong interest in addressing styling via a classNames api similar to the styles api with TailwindCSS in mind.

[JuanM04]

Custom components have a common prop which can be set called className

But I would need to "recreate" every component only for a style change...

Jed has expressed a strong interest in addressing styling via a classNames api similar to the styles api with TailwindCSS in mind.

I would love to see that implemented 😍

[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;
}