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
  • カスタマイズ用のCompound Component API

TypeScriptの型

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

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 — Compound Componentsによるカスタムレンダリング

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

次のステップ