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 属性提供类型 ("small" | "medium" | "large" | "x-large")
  • TimeConfig — 配置时间选择器的精度、格式和步长
  • DateRangePreset — 为 DateRangePicker / DateRangeTimePicker 定义预设
  • CalendarMonth, DayProps — 使用复合组件进行自定义渲染

有关详细的类型定义，请参阅 无头组件类型。

下一步