TailwindCSS

[malyshenko-developer]

I want to use the day picker styles and reuse only the ones I need through tailwindcss, but the problem is that many of them are overridden by the original classes.
In this case, uppercase and text-sm cannot be applied

import { Icon } from "@/assets/Icon"
import { DayPicker, getDefaultClassNames } from "react-day-picker"
import { ru } from "react-day-picker/locale"
import "react-day-picker/style.css"

export const StreakCalendar = () => {
  const defaultClassNames = getDefaultClassNames()

  return (
    <DayPicker
      locale={ru}
      classNames={{
        root: `${defaultClassNames.root}`,
        month_caption: `${defaultClassNames.month_caption} border-b border-grey-1`,
        caption_label: `${defaultClassNames.caption_label} text-base font-medium capitalize`,
        weekday: `${defaultClassNames.weekday} uppercase text-sm`,
      }}
      components={{
        Chevron: ({ className, orientation, ...chevronProps }) => {
          switch (orientation) {
            case "left":
              return <Icon.Chevron className="h-3.5 w-3.5" {...chevronProps} />
            case "right":
              return (
                <Icon.Chevron
                  className="h-3.5 w-3.5 rotate-180"
                  {...chevronProps}
                />
              )
            default:
              return <Icon.Chevron className="h-3.5 w-3.5" />
          }
        },
      }}
    />
  )
}

Can you tell me how to do this?

[oluwatunmiisheii]

One way is to use !important with your Tailwind classes so it overrides the default classes. e.g font-medium! capitalize!