Типографика

Пакет Tailwind v3 использует стандартный класс Tailwind font-sans (ui-sans-serif, system-ui, sans-serif, ...). Поскольку CSS font-family наследуется, вы можете переопределить шрифт средства выбора, обернув его в контейнер со стилем fontFamily. Шрифт обертки каскадно применяется ко всем элементам средства выбора.

Семейство шрифтов

Оберните средство выбора и установите fontFamily на обертке, чтобы переключить шрифты:

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

Использование веб-шрифтов (Noto Sans)

Загрузите веб-шрифт во время выполнения и примените его через обертку. Этот пример загружает Noto Sans из 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

💡 Использование в продакшене

В реальном проекте загружайте шрифт через тег <link> в <head> вашего HTML или через ваш сборщик CSS вместо того, чтобы внедрять его во время выполнения. Подход с useEffect здесь используется только в демонстрационных целях.

Галерея веб-шрифтов

Сравните различные веб-шрифты, чтобы увидеть, как кардинально типографика меняет внешний вид средства выбора. Все шрифты ниже поддерживают многоязычный рендеринг (латиница, CJK, корейский).

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