Kiểu chữ

Gói Tailwind v4 sử dụng lớp font-sans mặc định của Tailwind (ui-sans-serif, system-ui, sans-serif, ...). Vì font-family trong CSS được kế thừa, bạn có thể ghi đè phông chữ của bộ chọn bằng cách bọc nó trong một thẻ chứa có kiểu fontFamily. Phông chữ của thẻ bọc sẽ được áp dụng cho tất cả các phần tử của bộ chọn.

Họ phông chữ

Bọc bộ chọn và đặt fontFamily trên thẻ bọc để chuyển đổi phông chữ:

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

Sử dụng Web Fonts (Noto Sans)

Tải một phông chữ web trong lúc chạy và áp dụng nó thông qua một thẻ bọc. Ví dụ này tải Noto Sans từ 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

💡 Sử dụng trong môi trường production

Trong một dự án thực tế, hãy tải phông chữ thông qua thẻ <link> trong <head> của HTML hoặc thông qua trình đóng gói CSS của bạn thay vì chèn vào lúc chạy. Cách tiếp cận dùng useEffect ở đây chỉ nhằm mục đích minh họa.

Thư viện Phông chữ Web

So sánh các phông chữ web khác nhau để xem kiểu chữ thay đổi giao diện của bộ chọn một cách đáng kể như thế nào. Tất cả các phông chữ dưới đây đều hỗ trợ hiển thị đa ngôn ngữ (Latin, CJK, tiếng Hàn).

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