Tailwind CSS v3 入門

Tailwind v3 パッケージは、Tailwind CSS v3 のユーティリティクラスでスタイリングされた日付ピッカーコンポーネントを提供します。

インストール

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

パッケージの内容

コンポーネント説明
DatePickerポップアップカレンダー付きの単一の日付選択
DateRangePickerデュアルカレンダーとプリセット付きの日付範囲選択
DateTimePicker時間スクロールパネル付きの日付＋時刻選択
DateRangeTimePicker日付範囲＋時刻選択

すべてのコンポーネントは以下をサポートしています：

  • value / onChange による制御された値
  • キーボードナビゲーション
  • dark: バリアントによるダークモード
  • 4つのサイズ： small, medium, large, x-large
  • カスタマイズのための Compound Component API

TypeScript の型

すべての設定とデータ型はパッケージから再エクスポートされるため、ヘッドレスパッケージを別途インストールする必要はありません：

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 — Compound Components を使用したカスタムレンダリング

詳細な型定義については、Headless Types を参照してください。

次のステップ