[V9] [HOW-TO] Need help with range_start background using tailwind.

[berkerdemirer]

Hey,

I am trying to style the Calendar with Tailwind CSS. I am almost there but cannot make this range_start class work as in the example provided in the docs.

Whenever I assign this range_start background, I see that the whole background of the selected class changes. I want this half background so that my circle buttons integrate with range_middle seamlessly.

Any help is appreciated!

export type CalendarProps = DayPickerProps;

function Calendar({
  className,
  classNames,
  showOutsideDays = true,
  ...props
}: CalendarProps) {
  return (
    <DayPicker
      showOutsideDays={showOutsideDays}
      className={cn('p-4', className)}
      classNames={{
        months: 'inline-flex gap-4 w-full justify-center',
        month: 'space-y-4',
        day_button:
          'h-12 w-12 hover:border hover:border-primary hover:rounded-full',
        selected: 'bg-primary rounded-full text-primary-foreground',
        range_start: 'bg-accent rounded-none z-1',
        range_middle: 'bg-accent rounded-none',
        button_next: cn(
          buttonVariants({
            variant: 'ghost',
            className: 'h-10 w-10 bg-transparent p-0 opacity-100',
          })
        ),
        day: 'h-12 w-12',
        weekday: 'rounded-md w-12 h-12 font-[500]',
        button_previous: cn(
          buttonVariants({
            variant: 'ghost',
            className: 'h-10 w-10 bg-transparent p-0 opacity-100',
          })
        ),
        today: 'text-primary',
        disabled: 'text-muted-foreground opacity-50',
        caption_label: 'text-md font-bold',
        nav: 'flex items-center justify-between absolute w-full z-10 px-6',
        month_caption: 'flex justify-center items-center pt-2',
        ...classNames,
      }}
      components={{
        Chevron: (props) => {
          if (props.orientation === 'left') {
            return <Icons.chevronLeft {...props} />;
          }
          return <Icons.chevronRight {...props} />;
        },
      }}
      {...props}
    />
  );
}
Calendar.displayName = 'Calendar';

export { Calendar };

[berkerdemirer]

It looks like selected class applies to the td div instead of the button inside of it. That's why I cannot give different styles to button and the background. Maybe I am missing something..

[berkerdemirer]

@gpbl do you have any idea? :/

[gpbl]

@berkerdemirer thanks with your feedback about using Tailwind with DayPicker. There's an easy fix for this - add these classes to the button as well. Let me try this solution.

Do you have other suggestions to improve the use of DayPicker with tailwind?

[gpbl]

@berkerdemirer I'm not familiar with tailwind so thanks for your patience here!

I believe there are two possible issues here:

1. background button reset

react-day-picker/src/style.css

Lines 75 to 84 in 81f79fd

	/* Reset buttons */
	.rdp-root button {
	border: none;
	background: none;
	padding: 0;
	margin: 0;
	cursor: pointer;
	font: inherit;
	color: inherit;
	}

This code is setting background: none to .rdp-root button. Is this interfering with the styling? I don't think so, since the CSS specificity via class attribute should win. But I may be wrong.

2. missing classes for targeting the button when the day is selected

For example, a .rdp-button_range_start new class name should be added to button itself:

<td ...>
  <button class="rdp-button_range_start">{date}</button>
</td>

This can be configured like:

<DayPicker classNames={{ button_range_start: "rdp-button_range_start" }} />

It would be useful to have some real code to play with Tailwind and DayPicker. Could you setup a CodeSandbox http://codesandbox.io with a reproducible case? This would help a lot.

Again thanks for your help here!

[berkerdemirer]

https://codesandbox.io/p/devbox/icy-paper-zg5szk

Here you go with the reproducible sandbox. Let me know if you would require more assistance

[berkerdemirer]

I am not 100% sure if background: none would interfere and cause the current issue. Background style is applied to the wrapper div no matter what. If you check the playground example, you will see that select applies background to the day_button itself but here in the classNames approach we can see that it is applied to the div that wraps the button. If background: none was the issue we wouldn't observe a color change in the cell div either.

[gpbl]

Background style is applied to the wrapper div no matter what.

Hi @berkerdemirer I can confirm this - in v8, the target of the selected class was the button, now it is the parent cell element. With Tailwind, it seems difficult to target the style of a child according to the parent's class name.

While this is easy with the CSS cascade:

.selected .button { /* style for the selected button */ }

I understand it is not possible with Tailwind: just by replacing .selected with the Tailwind classes, you can't change the appearance of button.

Anyway, thanks for super useful CodeSandbox. Adding new class names to target the button itself should allow you to fix your issue here.

Please be patient while I'm working on it...

[berkerdemirer]

Thanks a lot investing time to fix this. I will be waiting.

[gpbl]

@berkerdemirer If I understand correctly, you want to reproduce the style of a selected range, but using Tailwind. I believe the difficulty is to find the right Tailwind classes - not a problem in DayPicker itself.

The selected class doesn't do much in DayPicker - it just add a border to the selected button, so you can ignore it.

For the range, I applied two backgrounds:

• one applied to the td.rdp-range_start elements,
• one for button.rdp-day_button elements when children of such tds.

react-day-picker/src/style.css

Lines 268 to 275 in 81f79fd

	.rdp-range_start {
	background: var(--rdp-range_start-background);
	}
	.rdp-range_start .rdp-day_button {
	background-color: var(--rdp-range_start-date-background-color);
	color: var(--rdp-range_start-color);
	}

To do the same in Tailwind CSS, you can use the [&>button] arbitrary variant. This "selector" can target the button when child of a range_start:

classNames={{

  // use the "arbitrary variant"
  range_start: 'CELL_CSS [&>button]:BUTTON_CSS',

  /* ... */
  day_button: 'some css', // note this is applied to `range_start` too
  selected: 'some css', // note this is applied to `range_start` too
}}

• Replace CELL_CSS with the background you want. Beware: in DayPicker's default style, this is a half transparent gradient:
  

  react-day-picker/src/style.css

  Line 39 in 81f79fd

  --rdp-range_start-background: linear-gradient(var(--rdp-gradient-direction), transparent 50%, var(--rdp-range_middle-background-color) 50%); /* Used for the background of the start of the selected range. */

• Replace the BUTTON_CSS with the style of the button when start of the range. This is the style I used:
  

  react-day-picker/src/style.css

  Lines 272 to 275 in 81f79fd

  	.rdp-range_start .rdp-day_button {
  	background-color: var(--rdp-range_start-date-background-color);
  	color: var(--rdp-range_start-color);
  	}

In conclusion, to style the range with Tailwind CSS,

• make sure you understand how the CSS classes are applied: set the playground in range mode and look at the source in the developer tools.
• use the source of style.css as reference.
• use the "arbitrary variant" feature by Tailwind CSS to target the button elements when child of a range.
• focus on the range_start, range_middle, range_end classes.

I don't have the time to try this by myself at the moment - sorry for that. Yet I'm really curious about the solution here.

[berkerdemirer]

This works as expected!

range_start: 'bg-gradient-to-r from-transparent from-[percentage:0%_50%] via-[percentage:50%_100%] via-primary/30 [&>button]:bg-primary [&>button]:rounded-3xl [&>button]:text-primary-foreground',

range_middle: 'rounded-none bg-primary/30 [&>button]:bg-transparent ',

range_end: 'bg-gradient-to-l from-transparent from-[percentage:0%_50%] via-[percentage:50%_100%] via-primary/30 [&>button]:bg-primary [&>button]:rounded-3xl [&>button]:text-primary-foreground',
      
selected: '[&>button]:bg-primary [&>button]:rounded-3xl [&>button]:text-primary-foreground',

[gpbl]

@berkerdemirer very happy to hear this! I'll add these info to the docs.

[vitorschelb]

After Hours trying, that the only way it worked for me:
modifiersStyles={{
range_start: {
backgroundColor: '#3182CE',
color: 'white',
borderRadius: '50%',
boxShadow: '10px 0px 0px #354A53',
position: 'relative',
zIndex: 2
},
range_end: {
backgroundColor: '#3182CE',
color: 'white',
borderRadius: '50%',
boxShadow: '-10px 0px 0px #354A53',
position: 'relative',
zIndex: 2
},
range_middle: {
backgroundColor: '#354A53',
boxShadow: '-10px 0px 0px #354A53, 10px 0px 0px #354A53',
position: 'relative',
zIndex: 1
}
}}