Styles are lost when cloning/deploying

[Tevuu]

Hi! Locally all styles are applied correctly. But if I add this to the repository and clone it, all styles instantly disappear.
Even if I just copy the folder and try to run the project, all styles will also disappear.

Local:

If clonning:

Code:

<DayPicker
      showOutsideDays={showOutsideDays}
      className={cn('py-3', className)}
      classNames={{
        months:
          'flex flex-col sm:flex-row space-y-4 sm:space-x-4 sm:space-y-0 w-full',
        month: 'space-y-4 w-full',
        caption: 'flex justify-center pt-1 relative items-center',
        caption_label: 'text-sm font-medium',
        nav: 'space-x-1 flex items-center',
        nav_button: cn(
          buttonVariants({ variant: 'outline' }),
          'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100',
        ),
        nav_button_previous: 'absolute left-6',
        nav_button_next: 'absolute right-6',
        table: 'w-full border-collapse space-y-1',
        head_row: 'flex w-full',
        head_cell:
          'text-neutral-500 rounded-xl w-full font-normal text-[0.8rem] dark:text-neutral-400',
        row: 'flex w-full mt-2',
        cell: 'h-9 w-full text-center text-sm p-0 relative [&:has([aria-selected].day-range-end)]:rounded-r-md [&:has([aria-selected].day-outside)]:bg-neutral-100/50 [&:has([aria-selected])]:bg-neutral-100 first:[&:has([aria-selected])]:rounded-l-md last:[&:has([aria-selected])]:rounded-r-md focus-within:relative focus-within:z-20 dark:[&:has([aria-selected].day-outside)]:bg-neutral-800/50 dark:[&:has([aria-selected])]:bg-neutral-800',
        day: cn(
          buttonVariants({ variant: 'ghost' }),
          'h-9 w-9 p-0 font-normal aria-selected:opacity-100 cursor-pointer',
        ),
        day_range_end: 'day-range-end',
        day_selected:
          'bg-neutral-900 text-neutral-50  focus:text-neutral-50 dark:bg-neutral-50 dark:text-neutral-900 dark:hover:bg-neutral-50 dark:hover:text-neutral-900 dark:focus:bg-neutral-50 dark:focus:text-neutral-900',
        day_today: 'text-neutral-900 dark:bg-neutral-800 dark:text-neutral-50',
        day_outside:
          'day-outside text-neutral-500 opacity-50 aria-selected:bg-neutral-100/50 aria-selected:text-neutral-500 aria-selected:opacity-30 dark:text-neutral-400 dark:aria-selected:bg-neutral-800/50 dark:aria-selected:text-neutral-400',
        day_disabled: 'text-neutral-500 opacity-50 dark:text-neutral-400',
        day_range_middle:
          'aria-selected:bg-neutral-100 aria-selected:text-neutral-900 dark:aria-selected:bg-neutral-800 dark:aria-selected:text-neutral-50',
        day_hidden: 'invisible',
        ...classNames,
      }}
      modifiers={{
        highlighted: date => highlightedDatesSet.has(date.toDateString()),
      }}
      modifiersStyles={{
        highlighted: { border: '1px solid #333333', borderRadius: '100%' },
      }}
      onDayClick={handleDayClick}
      {...props}
    />
    ```

[gpbl]

Same as #2493?

[Tevuu]

I did exactly as it was said there, but it didn't help. Half of the styles don't seem to work or just aren't applied.

[gpbl]

There it was suggested to create reproducible errors and explore other possible solutions. Could you please go back to that thread, review the recommendations, and share any updates or attempts you’ve made?

That way, we can help you better!