Typografie

Das Tailwind v4-Paket verwendet Tailwinds Standardklasse font-sans (ui-sans-serif, system-ui, sans-serif, ...). Da die CSS-Eigenschaft font-family vererbt wird, können Sie die Schriftart des Pickers überschreiben, indem Sie ihn in einen Container mit einem fontFamily-Stil einschließen. Die Schriftart des Wrappers wird auf alle Picker-Elemente kaskadiert.

Schriftfamilie

Umschließen Sie den Picker und setzen Sie fontFamily auf den Wrapper, um die Schriftarten zu wechseln:

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

const fonts = {
  system: "inherit",
  serif: "'Georgia', 'Times New Roman', serif",
  mono: "'JetBrains Mono', 'Fira Code', monospace",
};

type FontName = keyof typeof fonts;

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

  return (
    <div>
      <div style={{ display: "flex", gap: 8, marginBottom: 16 }}>
        {(Object.keys(fonts) as FontName[]).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

Verwendung von Web-Schriftarten (Noto Sans)

Laden Sie eine Web-Schriftart zur Laufzeit und wenden Sie sie über einen Wrapper an. Dieses Beispiel lädt Noto Sans von Google Fonts:

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

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

💡 Produktionseinsatz

In einem echten Projekt laden Sie die Schriftart über ein <link>-Tag in Ihrem HTML-<head> oder über Ihren CSS-Bundler, anstatt sie zur Laufzeit zu injizieren. Der hier gezeigte useEffect-Ansatz dient nur zu Demonstrationszwecken.

Web-Schriftarten-Galerie

Vergleichen Sie verschiedene Web-Schriftarten, um zu sehen, wie dramatisch die Typografie das Aussehen des Pickers verändert. Alle unten aufgeführten Schriftarten unterstützen die mehrsprachige Darstellung (Latein, CJK, Koreanisch).

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

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