Primeiros passos com Tailwind CSS v3

O pacote Tailwind v3 fornece componentes de seleção de data estilizados com classes de utilitário Tailwind CSS v3.

Instalação

npm install react-date-range-picker-tailwind3

Configuração do Tailwind

Adicione o plugin e o caminho de content à sua configuração do 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],
};

Início rápido

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

O que está incluído

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

Todos os componentes suportam:

  • Valor controlado com value / onChange
  • Navegação pelo teclado
  • Modo escuro via variante dark:
  • 4 tamanhos: pequeno, médio, grande, ex-grande
  • API de componente composto para personalização

Tipos de TypeScript

Todas as configurações e tipos de dados são reexportados do pacote — não há necessidade de instalar o pacote headless separadamente:

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

Esses tipos são úteis para:

  • Locale — Substituições de localidade personalizadas (nomes de dias da semana, rótulos de botões, formatação de data)
  • DatePickerSize — Digitando a propriedade size ("small" | "medium" | "large" | "x-large")
  • TimeConfig — Configurando a precisão, o formato e as etapas do seletor de tempo
  • DateRangePreset — Definindo predefinições para DateRangePicker / DateRangeTimePicker
  • CalendarMonth, DayProps — Renderização personalizada com componentes compostos

Consulte Tipos sem cabeça para definições detalhadas de tipo.

Próximas etapas