How can I style background color on header using tailwind?

[Leonardoperrella]

I would like to achieve react-datepicker__header using tailwind

[Leonardoperrella]

...

[sergiosuramin]

I dont think so. I tried to override the class by overriding it with tailwind without success.

However, I found a workaround by overriding every class manually.
I tried it in next.js 14 and this is what I got:

I used Date range for one datepicker (check their example here):
<DateRangePicker selected={startDate} onChange={onChange} startDate={startDate} endDate={endDate} selectsRange inline />

and here is how i overrided it:

/* ROOT STYLE */
.react-datepicker {
  box-shadow: 0 0px 5px 2px rgba(0, 0, 0, 0.2) !important;
  border-radius: 1rem !important;
  border: none !important;
  min-width: 300px;
  height: auto;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* in this section: handles the prev/next arrow */
.react-datepicker__navigation {
  padding-top: 1.75rem !important;
}

/* CALENDAR HEADER: THIS IS THE WRAPPER OF MONTH, YEAR, PREV /NEXT ARROW, DAYNAMES SECTION */
.react-datepicker__header {
  background-color: white !important;
  border-top-right-radius: 1rem !important;
  border-bottom: none !important;
  padding: 0 !important;
}

/* MONTH CONTAINER */
> .react-datepicker__month-container {
  width: 100%;
  background-color: white !important;
  border-radius: 1rem !important;
  padding-top: 1rem !important;
}

>/* -----------------START: default day style----------------- */
/* this handles day names (Su, Mo, Tu, We, Th, Fr, Sa) */
.react-datepicker__day-names {
  padding: 1rem !important;
}

/* this handles each day styles */
.react-datepicker__day-name {
  color: #c1c1c1 !important;
  font-weight: bold;
  font-family: '__Nunito_Sans_bd8383' !important;
}

/* this handles the date style */
.react-datepicker__day {
  color: #6c6c6c !important;
  font-family: '__Nunito_Sans_bd8383' !important;
}
/* -----------------END: default day style----------------- */


/* -----------------START: selected day in range-----------------  */
/** 
* all classes below must be overrided in this following sequence
* 1st sequence is to handle on selecting event,
* 2nd sequence is to make sure the start date have a different styling when selecting a start date
* 3rd sequence is to make sure start date and end date have a different style after selecting date range.
* note: react-datepicker__day--keyboard-selected is the style for selected date candidate when you change the month
*/

/* 1st */
.react-datepicker__day--keyboard-selected,
.react-datepicker__day--selected,
.react-datepicker__day--in-range,
.react-datepicker__day--in-selecting-range {
  background-color: #979797 !important;
  color: white !important;
}

/* 2nd */
.react-datepicker__day--selected {
  background-color: black !important;
  color: white !important;
}

/* 3rd */
.react-datepicker__day--range-start,
.react-datepicker__day--range-end {
  background-color: black !important;
  color: white !important;
}
/* -----------------END: selected day in range-----------------  */

I need to put these styles in the root folder (/app/globals.css) in order for it to work.

Hope it helps.