색상

Tailwind v3 패키지는 CSS 변수 대신 하드코딩된 Tailwind 유틸리티 클래스(예: bg-sky-500)를 사용합니다. 색상을 변경하려면 Compound API를 사용하여 일자(day) 클래스 이름을 동적으로 오버라이드하세요:

ℹ️ Info

CSS 변수를 사용하는 styled 패키지와 달리, Tailwind v3는 런타임에 색상을 오버라이드하기 위해 Compound API가 필요합니다. 자세한 내용은 테마 오버라이드를 참조하세요.

import { useState } from "react";
import { DatePicker } from "react-date-range-picker-tailwind3";

const themes = {
  default: {
    selected: "bg-sky-500 text-white font-semibold hover:bg-sky-500/90",
    today: "font-bold text-sky-500",
    confirm: "bg-sky-500 hover:bg-sky-600",
  },
  purple: {
    selected: "bg-violet-500 text-white font-semibold hover:bg-violet-500/90",
    today: "font-bold text-violet-500",
    confirm: "bg-violet-500 hover:bg-violet-600",
  },
  rose: {
    selected: "bg-rose-500 text-white font-semibold hover:bg-rose-500/90",
    today: "font-bold text-rose-500",
    confirm: "bg-rose-500 hover:bg-rose-600",
  },
  emerald: {
    selected: "bg-emerald-500 text-white font-semibold hover:bg-emerald-500/90",
    today: "font-bold text-emerald-500",
    confirm: "bg-emerald-500 hover:bg-emerald-600",
  },
};

type ThemeName = keyof typeof themes;

function CompoundColorTheme() {
  const [value, setValue] = useState<Date | null>(null);
  const [theme, setTheme] = useState<ThemeName>("default");
  const t = themes[theme];

  return (
    <div>
      <div style={{ display: "flex", gap: 8, marginBottom: 12 }}>
        {(Object.keys(themes) as ThemeName[]).map((name) => (
          <button
            key={name}
            onClick={() => setTheme(name)}
            style={{
              padding: "4px 12px",
              border: `1px solid ${theme === name ? "#3b82f6" : "#d1d5db"}`,
              borderRadius: 6,
              background: theme === name ? "#eff6ff" : "#fff",
              color: theme === name ? "#3b82f6" : "#374151",
              cursor: "pointer",
              fontSize: 13,
              textTransform: "capitalize",
            }}
          >
            {name}
          </button>
        ))}
      </div>
      <DatePicker.Root value={value} onChange={setValue} inline>
        <DatePicker.Content>
          <DatePicker.Header>
            <DatePicker.PrevButton />
            <DatePicker.Title />
            <DatePicker.NextButton />
          </DatePicker.Header>
          <DatePicker.Grid daySelectedClassName={t.selected} dayTodayClassName={t.today} />
        </DatePicker.Content>
      </DatePicker.Root>
    </div>
  );
}

March 2026

팝업 모드

팝업 피커에서도 동일한 기술이 작동합니다:

import { useState } from "react";
import { DatePicker } from "react-date-range-picker-tailwind3";

const themes = {
  default: {
    selected: "bg-sky-500 text-white font-semibold hover:bg-sky-500/90",
    today: "font-bold text-sky-500",
    confirm: "bg-sky-500 hover:bg-sky-600",
    trigger: "",
  },
  purple: {
    selected: "bg-violet-500 text-white font-semibold hover:bg-violet-500/90",
    today: "font-bold text-violet-500",
    confirm: "bg-violet-500 hover:bg-violet-600",
    trigger: "hover:border-violet-500/50 focus-visible:ring-violet-500",
  },
  rose: {
    selected: "bg-rose-500 text-white font-semibold hover:bg-rose-500/90",
    today: "font-bold text-rose-500",
    confirm: "bg-rose-500 hover:bg-rose-600",
    trigger: "hover:border-rose-500/50 focus-visible:ring-rose-500",
  },
  emerald: {
    selected: "bg-emerald-500 text-white font-semibold hover:bg-emerald-500/90",
    today: "font-bold text-emerald-500",
    confirm: "bg-emerald-500 hover:bg-emerald-600",
    trigger: "hover:border-emerald-500/50 focus-visible:ring-emerald-500",
  },
};

type ThemeName = keyof typeof themes;

function CompoundColorThemePopup() {
  const [value, setValue] = useState<Date | null>(null);
  const [theme, setTheme] = useState<ThemeName>("default");
  const t = themes[theme];

  return (
    <div>
      <div style={{ display: "flex", gap: 8, marginBottom: 12 }}>
        {(Object.keys(themes) as ThemeName[]).map((name) => (
          <button
            key={name}
            onClick={() => setTheme(name)}
            style={{
              padding: "4px 12px",
              border: `1px solid ${theme === name ? "#3b82f6" : "#d1d5db"}`,
              borderRadius: 6,
              background: theme === name ? "#eff6ff" : "#fff",
              color: theme === name ? "#3b82f6" : "#374151",
              cursor: "pointer",
              fontSize: 13,
              textTransform: "capitalize",
            }}
          >
            {name}
          </button>
        ))}
      </div>
      <DatePicker.Root value={value} onChange={setValue}>
        <DatePicker.Trigger className={t.trigger} />
        <DatePicker.Content>
          <DatePicker.Header>
            <DatePicker.PrevButton />
            <DatePicker.Title />
            <DatePicker.NextButton />
          </DatePicker.Header>
          <DatePicker.Grid daySelectedClassName={t.selected} dayTodayClassName={t.today} />
          <DatePicker.Footer>
            <DatePicker.ClearButton />
            <DatePicker.CancelButton />
            <DatePicker.ConfirmButton className={t.confirm} />
          </DatePicker.Footer>
        </DatePicker.Content>
      </DatePicker.Root>
    </div>
  );
}