Primeros Pasos con Tailwind CSS v3

El paquete de Tailwind v3 proporciona componentes de selector de fechas estilizados con clases de utilidad de Tailwind CSS v3.

Instalación

Configuración de Tailwind

Añade el plugin y la ruta de content a tu configuración de Tailwind:

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

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

Qué se Incluye

| Componente