v9 Tailwind Classes

[smorris1709]

Here are some starter classes for the tailwind implementation

<DayPicker
      showOutsideDays={showOutsideDays}
      className={"p-3"}
      classNames={{
        months: 'relative flex flex-wrap justify-center gap-8',
        month_caption:
          'flex items-center font-medium text-lg h-9 px-2 text-gray-800',
        nav: 'absolute inset-x-0 flex justify-end items-center h-9 gap-2',
        button_next:
          'relative inline-flex items-center justify-center size-9 hover:bg-gray-100 rounded',
        button_previous:
          'relative inline-flex items-center justify-center size-9 hover:bg-gray-100 rounded',
        calendar: 'relative text-sm',
        chevron: 'inline-block size-7 fill-gray-400',
        week: 'grid grid-cols-7',
        weekdays: 'grid grid-cols-7',
        weekday: 'size-9 flex items-center justify-center text-gray-500',
        day: 'inline-flex items-center justify-center rounded text-gray-700 hover:bg-gray-200 hover:text-gray-900 size-9 font-normal aria-selected:opacity-100 cursor-pointer',
        today: 'bg-gray-100 font-semibold',
        selected:
          'bg-blue-500 text-white hover:bg-blue-500 hover:text-white focus:bg-blue-500 focus:text-white',
        outside: 'text-gray-500 opacity-50 ',
        disabled: 'text-gray-500 opacity-50 cursor-auto',
        range_middle:
          'aria-selected:bg-blue-50 aria-selected:text-gray-900 aria-selected:hover:bg-blue-200 rounded-none ',
        hidden: 'invisible',
      }}
    />
    

[gpbl]

@smorris1709 thanks a lot! What a welcome contribution. I'll push this example in the next days...

[allreddv]

Thanks, this helped solve my issues when upgrading to v9 while using Shadcn Calendar component. The original component wasn't working for me in Safari, upgrading to version 9 worked for being able to use it, but broke the css completely. I posted a comment with code I ended up using in case anyone has same issue.