Tailwind CSS v4 入門指南

Tailwind v4 套件提供了使用 Tailwind CSS v4 功能類別和語意化設計權杖設定樣式的日期選擇器元件。

安裝

npm install react-date-range-picker-tailwind4

在您的主 CSS 檔案中匯入元件樣式：

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

如果您的專案尚未定義語意化設計權杖（例如 shadcn/ui 專案已經包含它們），還需匯入預設主題：

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

shadcn/ui 專案

shadcn/ui 已經定義了所需的權杖。您只需要元件樣式：

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

獨立 Tailwind v4 專案

對於沒有 shadcn/ui 的專案，需要同時匯入主題權杖和元件樣式：

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

語意化權杖

元件內部使用 --rdrp-* CSS 自訂屬性，透過 var() 帶有後備值對應到 Tailwind v4 / shadcn 語意化權杖。如果您想自訂對應方式，請在 CSS 中覆寫 --rdrp-* 變數。

rdrp-theme.css 檔案提供了帶有以下權杖的預設 Slate + Sky 調色盤：

權杖用途
--color-background元件背景
--color-foreground文字顏色
--color-primary選取的日期、啟用狀態
--color-primary-foreground主要顏色上的文字
--color-muted-foreground淡化文字、佔位符
--color-accent懸停背景
--color-border邊框顏色
--color-ring聚焦環顏色

快速入門

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: 變體支援深色模式
  • 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-tailwind4";

這些類型可用於：

  • Locale — 自訂語系覆寫 (星期名稱、按鈕標籤、日期格式)
  • DatePickerSize — 為 size 屬性設定類型 ("small" | "medium" | "large" | "x-large")
  • TimeConfig — 設定時間選擇器的精度、格式和步進
  • DateRangePreset — 為 DateRangePicker / DateRangeTimePicker 定義預設選項
  • CalendarMonth, DayProps — 使用複合元件進行自訂渲染

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

後續步驟