Tailwind CSS v3로 시작하기

Tailwind v3 패키지는 Tailwind CSS v3 유틸리티 클래스로 스타일링된 날짜 선택기(date picker) 컴포넌트를 제공합니다.

설치

npm install react-date-range-picker-tailwind3

Tailwind 설정

Tailwind 설정에 플러그인과 content 경로를 추가하세요:

tailwind.config.js
import { rdrpPlugin } from "react-date-range-picker-tailwind3/plugin";


export default {
  content: [
    "./src/**/*.{js,ts,jsx,tsx}",
    "./node_modules/react-date-range-picker-tailwind3/dist/**/*.{js,mjs}",
  ],
  darkMode: "class",
  plugins: [rdrpPlugin],
};

빠른 시작

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


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


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

포함된 컴포넌트

Component설명
DatePicker팝업 캘린더를 통한 단일 날짜 선택
DateRangePicker듀얼 캘린더 및 프리셋을 통한 날짜 범위 선택
DateTimePicker시간 스크롤 패널을 통한 날짜 + 시간 선택
DateRangeTimePicker날짜 범위 + 시간 선택

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

  • value / onChange를 통한 제어 컴포넌트(Controlled) 방식
  • 키보드 내비게이션
  • dark: 변형(variant)을 통한 다크 모드
  • 4가지 크기: small, medium, large, x-large
  • 커스터마이징을 위한 Compound Component API

TypeScript 타입

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

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

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

  • Locale — 커스텀 로캘 재정의 (요일 이름, 버튼 레이블, 날짜 포맷)
  • DatePickerSize — size prop 타이핑 ("small" | "medium" | "large" | "x-large")
  • TimeConfig — 시간 선택기의 정밀도, 포맷, 단계(steps) 설정
  • DateRangePreset — DateRangePicker / DateRangeTimePicker를 위한 프리셋 정의
  • CalendarMonth, DayProps — Compound Component를 사용한 커스텀 렌더링

자세한 타입 정의는 Headless Types를 참조하세요.

다음 단계