Tipografi

Tailwind v3 paketi, Tailwind’in varsayılan font-sans sınıfını (ui-sans-serif, system-ui, sans-serif, ...) kullanır. CSS font-family özelliği kalıtım yoluyla geçtiğinden, seçiciyi fontFamily stiline sahip bir kapsayıcıya sararak yazı tipini geçersiz kılabilirsiniz. Kapsayıcının yazı tipi, tüm seçici öğelerine kademeli olarak uygulanır.

Yazı Tipi Ailesi

Yazı tiplerini değiştirmek için seçiciyi sarın ve sarmalayıcıda fontFamily’yi ayarlayın:

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

Web Yazı Tiplerini Kullanma (Noto Sans)

Çalışma zamanında bir web yazı tipi yükleyin ve bir sarmalayıcı aracılığıyla uygulayın. Bu örnek, Google Fonts’tan Noto Sans yükler:

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

💡 Üretim ortamında kullanım

Gerçek bir projede, yazı tipini çalışma zamanında enjekte etmek yerine HTML <head> bölümünüzdeki bir <link> etiketi aracılığıyla veya CSS paketleyiciniz aracılığıyla yükleyin. Buradaki useEffect yaklaşımı yalnızca tanıtım amaçlıdır.

Web Yazı Tipi Galerisi

Tipografinin seçicinin görünümünü ne kadar dramatik bir şekilde değiştirdiğini görmek için farklı web yazı tiplerini karşılaştırın. Aşağıdaki tüm yazı tipleri çok dilli işlemeyi (Latin, CJK, Korece) destekler.

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