Typography

The Tailwind v3 package uses Tailwind’s default font-sans class (ui-sans-serif, system-ui, sans-serif, ...). Since CSS font-family is inherited, you can override the picker’s font by wrapping it in a container with a fontFamily style. The wrapper’s font cascades into all picker elements.

Font Family

Wrap the picker and set fontFamily on the wrapper to switch fonts:

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

const fonts: Record<string, string> = {
  system: "ui-sans-serif, system-ui, sans-serif",
  serif: "Georgia, 'Times New Roman', serif",
  mono: "'Courier New', Courier, monospace",
};

function CompoundCustomFont() {
  const [value, setValue] = useState<Date | null>(null);
  const [font, setFont] = useState("system");

  return (
    <div>
      <div style={{ display: "flex", gap: 8, marginBottom: 16 }}>
        {Object.keys(fonts).map((name) => (
          <button
            key={name}
            onClick={() => setFont(name)}
            style={{
              padding: "4px 12px",
              borderRadius: 4,
              border: `1px solid ${font === name ? "#3b82f6" : "#d1d5db"}`,
              background: font === name ? "#eff6ff" : "#fff",
              color: font === name ? "#3b82f6" : "#374151",
              cursor: "pointer",
              fontSize: 13,
              fontFamily: fonts[name],
              textTransform: "capitalize",
            }}
          >
            {name}
          </button>
        ))}
      </div>
      <div style={{ fontFamily: fonts[font] }}>
        <DatePicker value={value} onChange={setValue} inline />
      </div>
    </div>
  );
}

March 2026

Using Web Fonts (Noto Sans)

Load a web font at runtime and apply it via a wrapper. This example loads Noto Sans from Google Fonts:

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

function CompoundNotoSans() {
  const [value, setValue] = useState<Date | null>(null);

  useEffect(() => {
    if (!document.getElementById("noto-sans-font")) {
      const link = document.createElement("link");
      link.id = "noto-sans-font";
      link.rel = "stylesheet";
      link.href =
        "https://fonts.googleapis.com/css2?family=Noto+Sans:wght@400;500;600;700&display=swap";
      document.head.appendChild(link);
    }
  }, []);

  return (
    <div style={{ fontFamily: '"Noto Sans", sans-serif' }}>
      <DatePicker value={value} onChange={setValue} inline />
    </div>
  );
}

March 2026

💡 Production usage

In a real project, load the font via a <link> tag in your HTML <head> or through your CSS bundler instead of injecting it at runtime. The useEffect approach here is for demonstration purposes only.

Web Font Gallery

Compare different web fonts to see how dramatically typography changes the picker’s look. All fonts below support multi-language rendering (Latin, CJK, Korean).

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

const WEB_FONTS = [
  { name: "Noto Sans", family: '"Noto Sans", sans-serif' },
  { name: "Noto Serif", family: '"Noto Serif", serif' },
  { name: "IBM Plex Sans", family: '"IBM Plex Sans", sans-serif' },
  { name: "Roboto Slab", family: '"Roboto Slab", serif' },
];

const FONT_URL =
  "https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600;700&family=Noto+Sans:wght@400;500;600;700&family=Noto+Serif:wght@400;500;600;700&family=Roboto+Slab:wght@400;500;600;700&display=swap";

function CompoundWebFonts() {
  const [value, setValue] = useState<Date | null>(null);
  const [active, setActive] = useState(0);

  useEffect(() => {
    if (!document.getElementById("web-fonts-link")) {
      const link = document.createElement("link");
      link.id = "web-fonts-link";
      link.rel = "stylesheet";
      link.href = FONT_URL;
      document.head.appendChild(link);
    }
  }, []);

  return (
    <div>
      <div style={{ display: "flex", gap: 6, marginBottom: 12, flexWrap: "wrap" }}>
        {WEB_FONTS.map((f, i) => (
          <button
            key={f.name}
            onClick={() => setActive(i)}
            style={{
              padding: "6px 14px",
              border: `1px solid ${active === i ? "#3b82f6" : "#d1d5db"}`,
              borderRadius: 6,
              background: active === i ? "#eff6ff" : "#fff",
              color: active === i ? "#3b82f6" : "#374151",
              cursor: "pointer",
              fontSize: 13,
              fontFamily: f.family,
            }}
          >
            {f.name}
          </button>
        ))}
      </div>
      <div style={{ fontFamily: WEB_FONTS[active].family }}>
        <DatePicker value={value} onChange={setValue} inline />
      </div>
    </div>
  );
}

March 2026