Primeiros Passos com Tailwind CSS v4

O pacote Tailwind v4 fornece componentes de seletor de data estilizados com classes de utilitário do Tailwind CSS v4 e tokens de design semânticos.

Instalação

Importe os estilos dos componentes no seu arquivo CSS principal:

@import "react-date-range-picker-tailwind4/rdrp-styles.css";

Se o seu projeto ainda não define tokens de design semânticos (por exemplo, projetos shadcn/ui já os possuem), importe também o tema padrão:

@import "react-date-range-picker-tailwind4/rdrp-theme.css";

Projetos shadcn/ui

shadcn/ui já define os tokens necessários. Você só precisa dos estilos dos componentes:

/* 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";

Projetos Tailwind v4 Independentes

Para projetos sem shadcn/ui, importe tanto os tokens de tema quanto os estilos dos componentes:

@import "tailwindcss";
@import "react-date-range-picker-tailwind4/rdrp-theme.css";
@import "react-date-range-picker-tailwind4/rdrp-styles.css";

Tokens Semânticos

Os componentes utilizam propriedades personalizadas CSS --rdrp-* internamente, que mapeiam para tokens semânticos do Tailwind v4 / shadcn via var() com valores de fallback. Se você quiser personalizar o mapeamento, sobrescreva as variáveis --rdrp-* no seu CSS.

O arquivo rdrp-theme.css fornece uma paleta padrão Slate + Sky com estes tokens:

Guia Rápido

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

O que está incluído

| Componente | Descrição