Anulación de Tema

El paquete de Tailwind v3 utiliza clases de utilidad concretas de Tailwind (p. ej. sky-500, slate-100) para todo el estilo. Puedes personalizar la apariencia anulando el objeto de tema exportado desde el paquete.

Tema por Defecto

El tema se define como un conjunto de objetos exportados, cada uno conteniendo cadenas de nombres de clase para una parte del componente. Aquí tienes un resumen de la paleta de colores por defecto:

Rol	Clase Light	Clase Dark
Primario	`sky-500`	`sky-500`
Texto primario	`sky-500`	`sky-400`
Fondo	`white`	`slate-950`
Superficie hover	`slate-100`	`slate-800`
Texto	`slate-900`	`slate-50`
Texto atenuado	`slate-500`	`slate-400`
Borde	`slate-200`	`slate-800`
Fondo de rango	`sky-50`	`sky-950/50`
Peligro	`red-500`	`red-600`

Estructura del Objeto de Tema

El tema se divide en múltiples exportaciones nombradas:

import {
  rootClassNames,
  triggerClassNames,
  headerClassNames,
  gridClassNames,
  dayClassNames,
  footerClassNames,
  contentClassNames,
  rangeClassNames,
  dateTimeClassNames,
  timePanelClassNames,
} from "react-date-range-picker-tailwind3";

Cada objeto contiene claves que se asignan a cadenas de clases completas de Tailwind. Por ejemplo:

// dayClassNames
{
  day: "flex items-center justify-center w-9 h-9 mx-[1px] rounded-md transition-colors cursor-pointer hover:bg-slate-100 dark:hover:bg-slate-800 ...",
  today: "font-bold text-sky-500 dark:text-sky-400",
  selected: "bg-sky-500 dark:bg-sky-500 text-white font-semibold ...",
  inRange: "bg-sky-50 dark:bg-sky-950/50 text-slate-900 dark:text-slate-50 rounded-none mx-0 ...",
  rangeStart: "bg-sky-500 dark:bg-sky-500 text-white rounded-r-none mx-0 ...",
  rangeEnd: "bg-sky-500 dark:bg-sky-500 text-white rounded-l-none mx-0 ...",
  // ...
}

Anulación con Componentes Compuestos

La forma más directa de personalizar el tema es a través de la API de Componentes Compuestos. Cada parte acepta una prop className que se fusiona con los valores por defecto usando twMerge, por lo que las utilidades en conflicto se resuelven correctamente.

Cambiar Color Primario

Reemplaza sky con violet para el día seleccionado y los estados relacionados:

import { DatePicker } from "react-date-range-picker-tailwind3";

function VioletPicker() {
  const [value, setValue] = useState<Date | null>(null);

  return (
    <DatePicker.Root value={value} onChange={setValue}>
      <DatePicker.Trigger className="hover:border-violet-500/50 focus-visible:ring-violet-500 focus-visible:border-violet-500" />
      <DatePicker.Content>
        <DatePicker.Header>
          <DatePicker.PrevButton className="focus-visible:ring-violet-500" />
          <DatePicker.Title />
          <DatePicker.NextButton className="focus-visible:ring-violet-500" />
        </DatePicker.Header>
        <DatePicker.Grid
          dayClassName="hover:bg-violet-50 dark:hover:bg-violet-950/50 focus-visible:ring-violet-500"
          dayTodayClassName="text-violet-500 dark:text-violet-400"
          daySelectedClassName="bg-violet-500 dark:bg-violet-500 hover:bg-violet-500/90"
          dayInRangeClassName="bg-violet-50 dark:bg-violet-950/50 hover:bg-violet-100"
          dayRangeStartClassName="bg-violet-500 dark:bg-violet-500 hover:bg-violet-500/90"
          dayRangeEndClassName="bg-violet-500 dark:bg-violet-500 hover:bg-violet-500/90"
          dayFocusedClassName="ring-violet-500"
        />
        <DatePicker.Footer>
          <DatePicker.ClearButton />
          <DatePicker.CancelButton />
          <DatePicker.ConfirmButton className="bg-violet-500 hover:bg-violet-500/90 focus-visible:ring-violet-500" />
        </DatePicker.Footer>
      </DatePicker.Content>
    </DatePicker.Root>
  );
}

Fondo Personalizado

<DatePicker.Root value={value} onChange={setValue}>
  <DatePicker.Trigger className="bg-slate-50 dark:bg-slate-900" />
  <DatePicker.Content className="bg-slate-50 dark:bg-slate-900">{/* ... */}</DatePicker.Content>
</DatePicker.Root>

Creando un Objeto de Tema Personalizado

Para un rediseño de marca en toda la aplicación, crea un componente contenedor que aplique tus clases personalizadas a todas las partes:

import { DatePicker } from "react-date-range-picker-tailwind3";

const myTheme = {
  trigger: "hover:border-emerald-500/50 focus-visible:ring-emerald-500",
  dayToday: "text-emerald-500 dark:text-emerald-400",
  daySelected: "bg-emerald-500 dark:bg-emerald-500 hover:bg-emerald-500/90",
  dayInRange: "bg-emerald-50 dark:bg-emerald-950/50 hover:bg-emerald-100",
  dayRangeStart: "bg-emerald-500 dark:bg-emerald-500 hover:bg-emerald-500/90",
  dayRangeEnd: "bg-emerald-500 dark:bg-emerald-500 hover:bg-emerald-500/90",
  confirmButton: "bg-emerald-500 hover:bg-emerald-500/90 focus-visible:ring-emerald-500",
  focusRing: "focus-visible:ring-emerald-500",
};

export function MyDatePicker(props) {
  return (
    <DatePicker.Root {...props}>
      <DatePicker.Trigger className={myTheme.trigger} />
      <DatePicker.Content>
        <DatePicker.Header>
          <DatePicker.PrevButton className={myTheme.focusRing} />
          <DatePicker.Title />
          <DatePicker.NextButton className={myTheme.focusRing} />
        </DatePicker.Header>
        <DatePicker.Grid
          dayTodayClassName={myTheme.dayToday}
          daySelectedClassName={myTheme.daySelected}
          dayInRangeClassName={myTheme.dayInRange}
          dayRangeStartClassName={myTheme.dayRangeStart}
          dayRangeEndClassName={myTheme.dayRangeEnd}
          dayFocusedClassName={myTheme.focusRing}
        />
        <DatePicker.Footer>
          <DatePicker.ClearButton />
          <DatePicker.CancelButton />
          <DatePicker.ConfirmButton className={myTheme.confirmButton} />
        </DatePicker.Footer>
      </DatePicker.Content>
    </DatePicker.Root>
  );
}

Úsalo en toda tu aplicación:

<MyDatePicker value={date} onChange={setDate} />

Props de Clase para Días de la Rejilla

El componente Grid pasa las props de className relacionadas con el día a cada celda Day. Estas son las anulaciones disponibles:

Prop	Patrón de Clase por Defecto	Descripción
`dayClassName`	Estilos base del día	Clases base para todas las celdas de día
`dayTodayClassName`	`text-sky-500`	Indicador de hoy
`daySelectedClassName`	`bg-sky-500 text-white`	Día seleccionado
`dayDisabledClassName`	`opacity-50`	Días deshabilitados
`dayOutsideClassName`	`text-slate-500/50`	Días fuera del mes
`dayHighlightedClassName`	`after:bg-amber-500`	Punto de resaltado
`dayInRangeClassName`	`bg-sky-50`	Días dentro del rango
`dayRangeStartClassName`	`bg-sky-500 rounded-r-none`	Día de inicio del rango
`dayRangeEndClassName`	`bg-sky-500 rounded-l-none`	Día de fin del rango
`dayRangeSingleClassName`	`bg-sky-500`	Rango de un solo día
`dayHoverRangeClassName`	`bg-sky-50/50`	Rango de previsualización al pasar el cursor
`dayHoverTargetClassName`	`bg-sky-100`	Punto final al pasar el cursor
`dayFocusedClassName`	`ring-sky-500`	Anillo de foco del teclado
`dayEmptyClassName`	`invisible`	Marcador de posición de celda vacía

Ruta de Contenido de Tailwind

Al anular con clases de color personalizadas, asegúrate de que estén incluidas en tus rutas de contenido de Tailwind. Las clases definidas en tus archivos de componentes se escanean por defecto, pero si las defines en un archivo de configuración separado, añade esa ruta también:

module.exports = {
  content: [
    "./src/**/*.{js,ts,jsx,tsx}",
    "./node_modules/react-date-range-picker-tailwind3/dist/**/*.{js,mjs}",
    // Añade la configuración de tu tema si está en un archivo separado
    "./src/config/date-picker-theme.ts",
  ],
};

💡 Tip

Si deseas un temado basado en tokens semánticos (como shadcn/ui) en lugar de clases de color concretas, considera usar el paquete de Tailwind v4 que utiliza tokens semánticos basados en variables de CSS.