Pierwsze kroki z Tailwind CSS v4

Pakiet Tailwind v4 dostarcza komponenty do wyboru daty, stylizowane za pomocą klas użytkowych Tailwind CSS v4 i semantycznych tokenów projektowych.

Instalacja

npm install react-date-range-picker-tailwind4

Zaimportuj style komponentów w swoim głównym pliku CSS:

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

Jeśli Twój projekt nie definiuje jeszcze semantycznych tokenów projektowych (np. projekty shadcn/ui już je mają), zaimportuj również domyślny motyw:

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

Projekty shadcn/ui

shadcn/ui już definiuje wymagane tokeny. Potrzebujesz tylko stylów komponentów:

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

Samodzielne projekty Tailwind v4

Dla projektów bez shadcn/ui, zaimportuj zarówno tokeny motywu, jak i style komponentów:

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

Semantyczne Tokeny

Komponenty używają wewnętrznie niestandardowych właściwości CSS --rdrp-*, które mapują się na semantyczne tokeny Tailwind v4 / shadcn poprzez var() z wartościami zastępczymi. Jeśli chcesz dostosować mapowanie, nadpisz zmienne --rdrp-* w swoim CSS.

Plik rdrp-theme.css dostarcza domyślną paletę Slate + Sky z tymi tokenami:

TokenZastosowanie
--color-backgroundTła komponentów
--color-foregroundKolor tekstu
--color-primaryWybrane daty, stany aktywne
--color-primary-foregroundTekst na kolorze podstawowym
--color-muted-foregroundPrzygaszony tekst, symbole zastępcze
--color-accentTła przy najechaniu
--color-borderKolory obramowania
--color-ringKolor pierścienia fokusa

Szybki start

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

Co jest w zestawie

KomponentOpis
DatePickerWybór pojedynczej daty z wyskakującym kalendarzem
DateRangePickerWybór zakresu dat z podwójnym kalendarzem i presetami
DateTimePickerWybór daty i godziny z panelem przewijania czasu
DateRangeTimePickerWybór zakresu dat i godzin

Wszystkie komponenty wspierają:

  • Kontrolowaną wartość za pomocą value / onChange
  • Nawigację za pomocą klawiatury
  • Tryb ciemny poprzez wariant dark:
  • 4 rozmiary: small, medium, large, x-large
  • API komponentów złożonych do personalizacji

Typy TypeScript

Wszystkie typy konfiguracyjne i danych są ponownie eksportowane z pakietu — nie ma potrzeby osobnej instalacji pakietu headless:

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

Te typy są przydatne do:

  • Locale — Niestandardowe nadpisania lokalizacji (nazwy dni tygodnia, etykiety przycisków, formatowanie daty)
  • DatePickerSize — Typowanie propa size ("small" | "medium" | "large" | "x-large")
  • TimeConfig — Konfiguracja precyzji, formatu i kroków wyboru czasu
  • DateRangePreset — Definiowanie presetów dla DateRangePicker / DateRangeTimePicker
  • CalendarMonth, DayProps — Niestandardowe renderowanie za pomocą komponentów złożonych

Zobacz Typy Headless po szczegółowe definicje typów.

Następne kroki