Tailwind CSS v4 시작하기

Tailwind v4 패키지는 Tailwind CSS v4 유틸리티 클래스와 시맨틱 디자인 토큰으로 스타일링된 데이트 피커 컴포넌트를 제공합니다.

설치

npm install react-date-range-picker-tailwind4

Importa gli stili dei componenti nel tuo file CSS principale:

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

Se il tuo progetto non definisce ancora token di design semantici (ad esempio, i progetti shadcn/ui li hanno già), importa anche il tema predefinito:

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

Progetti shadcn/ui

shadcn/ui definisce già i token necessari. Hai bisogno solo degli stili dei componenti:

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

Progetti Tailwind v4 autonomi

Per i progetti senza shadcn/ui, importa sia i token del tema che gli stili dei componenti:

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

Token Semantici

I componenti utilizzano internamente le proprietà personalizzate CSS --rdrp-*, che vengono mappate ai token semantici di Tailwind v4 / shadcn tramite var() con valori di fallback. Se desideri personalizzare la mappatura, sovrascrivi le variabili --rdrp-* nel tuo CSS.

Il file rdrp-theme.css fornisce una palette predefinita Slate + Sky con questi token:

TokenUtilizzo
--color-backgroundSfondi dei componenti
--color-foregroundColore del testo
--color-primaryDate selezionate, stati attivi
--color-primary-foregroundTesto sul colore primario
--color-muted-foregroundTesto attenuato, segnaposto
--color-accentSfondi al passaggio del mouse
--color-borderColori dei bordi
--color-ringColore dell’anello di focus

빠른 시작

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

포함된 컴포넌트

컴포넌트설명
DatePicker팝업 캘린더를 이용한 단일 날짜 선택
DateRangePicker듀얼 캘린더와 프리셋을 이용한 날짜 범위 선택
DateTimePicker시간 스크롤 패널을 이용한 날짜 + 시간 선택
DateRangeTimePicker날짜 범위 + 시간 선택

모든 컴포넌트는 다음을 지원합니다:

  • value / onChange를 통한 제어 컴포넌트
  • 키보드 탐색
  • dark: variant를 통한 다크 모드
  • 4가지 크기: small, medium, large, x-large
  • 커스터마이зацию을 위한 Compound Component API

TypeScript 타입

모든 설정 및 데이터 타입은 패키지에서 다시 내보내므로, headless 패키지를 별도로 설치할 필요가 없습니다:

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

이 타입들은 다음과 같은 경우에 유용합니다:

  • Locale — 커스텀 로케일 설정 (요일 이름, 버튼 라벨, 날짜 포맷 등)
  • DatePickerSize — size prop의 타입 지정 ("small" | "medium" | "large" | "x-large")
  • TimeConfig — 타임 피커의 정밀도, 형식, 단계 설정
  • DateRangePreset — DateRangePicker / DateRangeTimePicker를 위한 프리셋 정의
  • CalendarMonth, DayProps — Compound Component를 이용한 커스텀 렌더링

자세한 타입 정의는 Headless 타입 문서를 참고하세요.

다음 단계