Getting Started with Tailwind CSS v3

The Tailwind v3 package provides date picker components styled with Tailwind CSS v3 utility classes.

Installation

npm install react-date-range-picker-tailwind3

CSS Import

Import the component styles in your main CSS file:

/* src/index.css (or your global CSS entry point) */
@import "react-date-range-picker-tailwind3/rdrp-styles.css";

Tailwind Configuration

Add the plugin and content path to your Tailwind config:

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],
};

Quick Start

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

What’s Included

ComponentDescription
DatePickerSingle date selection with popup calendar
DateRangePickerDate range selection with dual calendar and presets
DateTimePickerDate + time selection with time scroll panel
DateRangeTimePickerDate range + time selection
TimePickerStandalone time selection

All components support:

  • Controlled value with value / onChange
  • Keyboard navigation
  • Dark mode via CSS variables
  • 4 sizes: small, medium, large, x-large
  • Compound Component API for customization

TypeScript Types

All configuration and data types are re-exported from the package — no need to install the headless package separately:

import type {
  Locale,
  DatePickerSize,
  TimeConfig,
  MinuteStep,
  SecondStep,
  TimePrecision,
  HourFormat,
  TimePeriod,
  CaptionLayout,
  WeekDay,
  DateRangePreset,
  CalendarMonth,
  DayProps,
} from "react-date-range-picker-tailwind3";

These types are useful for:

  • Locale — Custom locale overrides (weekday names, button labels, date formatting)
  • DatePickerSize — Typing the size prop ("small" | "medium" | "large" | "x-large")
  • TimeConfig — Configuring time picker precision, format, and steps
  • DateRangePreset — Defining presets for DateRangePicker / DateRangeTimePicker
  • CalendarMonth, DayProps — Custom rendering with Compound Components

See Headless Types for detailed type definitions.

Next Steps