Erste Schritte mit Tailwind CSS v4

Das Tailwind v4-Paket bietet Datumsauswahl-Komponenten, die mit Tailwind CSS v4 Utility-Klassen und semantischen Design-Tokens gestaltet sind.

Installation

Importieren Sie die Komponenten-Stile in Ihrer Haupt-CSS-Datei:

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

Wenn Ihr Projekt noch keine semantischen Design-Tokens definiert (z. B. shadcn/ui-Projekte haben diese bereits), importieren Sie auch das Standard-Theme:

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

shadcn/ui-Projekte

shadcn/ui definiert die benötigten Tokens bereits. Sie benötigen nur die Komponenten-Stile:

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

Eigenständige Tailwind v4-Projekte

Für Projekte ohne shadcn/ui importieren Sie sowohl die Theme-Tokens als auch die Komponenten-Stile:

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

Semantische Tokens

Die Komponenten verwenden intern --rdrp-* CSS Custom Properties, die über var() mit Fallback-Werten auf Tailwind v4 / shadcn semantische Tokens abgebildet werden. Um die Zuordnung anzupassen, überschreiben Sie die --rdrp-*-Variablen in Ihrem CSS.

Die Datei rdrp-theme.css bietet eine Standard Slate + Sky-Palette mit diesen Tokens:

Schnellstart

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

Was ist enthalten

| Komponente