Premiers pas avec Tailwind CSS v4

Le package Tailwind v4 fournit des composants de sélecteur de date stylisés avec les classes utilitaires Tailwind CSS v4 et des jetons de conception sémantique.

Installation

npm install react-date-range-picker-tailwind4

Importez les styles des composants dans votre fichier CSS principal :

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

Si votre projet ne définit pas encore de jetons de design sémantiques (par exemple, les projets shadcn/ui les ont déjà), importez également le thème par défaut :

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

Projets shadcn/ui

shadcn/ui définit déjà les jetons requis. Vous n’avez besoin que des styles des composants :

/* 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";

Projets Tailwind v4 autonomes

Pour les projets sans shadcn/ui, importez à la fois les jetons de thème et les styles des composants :

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

Jetons sémantiques

Les composants utilisent en interne des propriétés personnalisées CSS --rdrp-*, qui sont mappées vers les jetons sémantiques Tailwind v4 / shadcn via var() avec des valeurs de repli. Si vous souhaitez personnaliser le mappage, remplacez les variables --rdrp-* dans votre CSS.

Le fichier rdrp-theme.css fournit une palette Slate + Sky par défaut avec ces jetons :

JetonUtilisation
--color-backgroundArrière-plans des composants
--color-foregroundCouleur du texte
--color-primaryDates sélectionnées, états actifs
--color-primary-foregroundTexte sur la couleur primaire
--color-muted-foregroundTexte atténué, espaces réservés
--color-accentArrière-plans au survol
--color-borderCouleurs de bordure
--color-ringCouleur de l’anneau de focus

Démarrage rapide

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} />;
}

Ce qui est inclus

ComponentDescription
DatePickerSingle date selection with popup calendar
DateRangePickerDate range selection with dual calendar and presets
DateTimePickerDate + time selection with time scroll panel
DateRangeTimePickerDate range + time selection

Tous les composants prennent en charge :

  • Valeur contrôlée avec value / onChange
  • Navigation au clavier
  • Mode sombre via la variante dark:
  • 4 tailles : “petit”, “moyen”, “grand”, “x-large”
  • API de composant composé pour la personnalisation

Types de scripts dactylographiés

Tous les types de configuration et de données sont réexportés à partir du package — pas besoin d’installer le package sans tête séparément :

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

Ces types sont utiles pour :

  • Locale — Remplacements de paramètres régionaux personnalisés (noms des jours de la semaine, étiquettes des boutons, formatage de la date)
  • DatePickerSize — Saisie de l’accessoire size (“small”|”medium”|”large”|”x-large”`)
  • TimeConfig — Configuration de la précision, du format et des étapes du sélecteur de temps
  • DateRangePreset — Définition des préréglages pour DateRangePicker / DateRangeTimePicker
  • CalendarMonth, DayProps — Rendu personnalisé avec des composants composés

Voir Types sans tête pour des définitions de types détaillées.

Prochaines étapes