Tailwind CSS v3 入門

Tailwind v3 套件提供了使用 Tailwind CSS v3 工具類別設計樣式的日期選擇器元件。

安裝

npm install react-date-range-picker-tailwind3

Tailwind 設定

將外掛和 content 路徑新增至你的 Tailwind 設定中：

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

包含內容

元件說明
DatePicker彈出式日曆的單一日期選擇
DateRangePicker雙日曆與預設選項的日期範圍選擇
DateTimePicker帶有時間滾動面板的日期 + 時間選擇
DateRangeTimePicker日期範圍 + 時間選擇

所有元件都支援：

  • 使用 value / onChange 控制值
  • 鍵盤導覽
  • 透過 dark: 變體支援深色模式
  • 4 種尺寸：small、medium、large、x-large
  • 用於自訂的複合元件 API

TypeScript 型別

所有設定和資料型別都從套件中重新匯出 — 無需單獨安裝 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 — 設定時間選擇器的精度、格式和步長
  • DateRangePreset — 為 DateRangePicker / DateRangeTimePicker 定義預設選項
  • CalendarMonth, DayProps — 使用複合元件進行自訂渲染

有關詳細的型別定義，請參閱 Headless Types。

下一步