Primeros Pasos con Tailwind CSS v4

El paquete Tailwind v4 proporciona componentes de selector de fecha estilizados con clases de utilidad de Tailwind CSS v4 y tokens de diseño semánticos.

Instalación

npm install react-date-range-picker-tailwind4

Importa los estilos de los componentes en tu archivo CSS principal:

@import "react-date-range-picker-tailwind4/rdrp-styles.css";

Si tu proyecto aún no define tokens de diseño semánticos (por ejemplo, los proyectos shadcn/ui ya los tienen), importa también el tema predeterminado:

@import "react-date-range-picker-tailwind4/rdrp-theme.css";

Proyectos shadcn/ui

shadcn/ui ya define los tokens necesarios. Solo necesitas los estilos de los componentes:

/* app/globals.css or src/index.css */
@import "tailwindcss";
@import "tw-animate-css";
@import "react-date-range-picker-tailwind4/rdrp-reset.css";
@import "react-date-range-picker-tailwind4/rdrp-styles.css";

Proyectos Tailwind v4 Independientes

Para proyectos sin shadcn/ui, importa tanto los tokens del tema como los estilos de los componentes:

src/index.css
@import "tailwindcss";
@import "react-date-range-picker-tailwind4/rdrp-theme.css";
@import "react-date-range-picker-tailwind4/rdrp-styles.css";

Tokens Semánticos

Los componentes utilizan propiedades personalizadas CSS --rdrp-* internamente, que se mapean a tokens semánticos de Tailwind v4 / shadcn mediante var() con valores de respaldo. Si deseas personalizar el mapeo, sobrescribe las variables --rdrp-* en tu CSS.

El archivo rdrp-theme.css proporciona una paleta predeterminada Slate + Sky con estos tokens:

TokenUso
--color-backgroundFondos de los componentes
--color-foregroundColor del texto
--color-primaryFechas seleccionadas, estados activos
--color-primary-foregroundTexto sobre el color primario
--color-muted-foregroundTexto atenuado, marcadores de posición
--color-accentFondos al pasar el ratón
--color-borderColores de borde
--color-ringColor del anillo de enfoque

Inicio Rápido

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


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


  return <DatePicker value={value} onChange={setValue} />;
}

Qué está Incluido

ComponenteDescripción
DatePickerSelección de fecha única con calendario emergente
DateRangePickerSelección de rango de fechas con calendario dual y preajustes
DateTimePickerSelección de fecha + hora con panel de desplazamiento de tiempo
DateRangeTimePickerSelección de rango de fechas + hora

Todos los componentes soportan:

  • Valor controlado con value / onChange
  • Navegación por teclado
  • Modo oscuro a través de la variante dark:
  • 4 tamaños: small, medium, large, x-large
  • API de Componentes Compuestos para personalización

Tipos de TypeScript

Todos los tipos de configuración y datos se reexportan desde el paquete — no es necesario instalar el paquete headless por separado:

import type {
  Locale,
  DatePickerSize,
  TimeConfig,
  MinuteStep,
  SecondStep,
  TimePrecision,
  HourFormat,
  TimePeriod,
  CaptionLayout,
  WeekDay,
  DateRangePreset,
  CalendarMonth,
  DayProps,
} from "react-date-range-picker-tailwind4";

Estos tipos son útiles para:

  • Locale — Sobrescribir la configuración regional personalizada (nombres de los días de la semana, etiquetas de los botones, formato de fecha)
  • DatePickerSize — Tipar la prop size ("small" | "medium" | "large" | "x-large")
  • TimeConfig — Configurar la precisión, el formato y los pasos del selector de tiempo
  • DateRangePreset — Definir preajustes para DateRangePicker / DateRangeTimePicker
  • CalendarMonth, DayProps — Renderizado personalizado con Componentes Compuestos

Consulta Headless Types para definiciones de tipo detalladas.

Próximos Pasos