Início / user-3046503

Paul Martinez's questions

Martin Hope
Paul Martinez
Asked: 2025-04-15 19:46:12 +0800 CST
  • 6

Estou tentando usar uma fonte personalizada (RetroGaming.ttf) no meu projeto React usando Vite e Tailwind CSS v4, mas a fonte não está sendo aplicada. A @font-faceregra parece ser ignorada, e a classe Tailwind gerada não inclui a fonte personalizada em sua font-familypropriedade.

Pilha de tecnologia

  • Estrutura: React (^19.0.0)
  • Ferramenta de construção: Vite (^6.2.0)
  • Estilo: Tailwind CSS (^4.1.3)
  • Processamento CSS: PostCSS (^8.5.3) com autoprefixere@tailwindcss/postcss
  • Arquivo de fonte: [RetroGaming.ttf]

Meta

Defina RetroGamingFontvia @font-facee aplique-o usando uma classe de utilitário Tailwind font-custom-retro.

Problema

  1. A fonte personalizada não é renderizada; os elementos usam a fonte reserva.
  2. O pacote CSS de produção ( dist/assets/) não possui a @font-faceregra .
  3. A classe gerada .font-custom-retroinclui apenas a fonte de fallback ( sans-serif), não RetroGamingFont.
  4. As ferramentas de desenvolvimento do navegador não mostram nenhum erro 404 para [/fonts/RetroGaming.ttf]
  5. O problema persiste, esteja @font-faceele em src/index.cssou diretamente em index.html.

Configuração

tailwind.config.js

/** @type {import('tailwindcss').Config} */
export default {
  content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
  theme: {
    extend: {
      fontFamily: {
        'custom-retro': ['RetroGamingFont', 'sans-serif'], // Font definition with fallback
      },
    },
  },
  plugins: [],
}

postcss.config.js

export default {
  plugins: {
    '@tailwindcss/postcss': {}, // Required for v4
    autoprefixer: {},
  },
}

src/index.css (Atualmente vazio em relação a @font-face)

@import "tailwindcss"; /* Tailwind v4 import, placed first */
    
/* @font-face moved to index.html for testing */

index.html (Estado atual)

<!-- Inside <head> -->
<style>
  @font-face {
    font-family: 'RetroGamingFont';
    src: url('/fonts/RetroGaming.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
  }
</style>

Uso em CompatibilityForm.jsx

<h2 className="text-2xl font-custom-retro text-pink-400">...</h2>
<label className="font-custom-retro text-indigo-200">...</label>

O que eu tentei

Configuração correta do Tailwind v4:

  • Usando @import "tailwindcss";emsrc/index.css
  • Usando @tailwindcss/postcssplugin, sem @tailwindcss/viteplugin.

@font-faceColocação:

  • Testado em src/index.css(depois @import) e diretamente na index.html <style>tag.

Nenhuma das duas funcionou.

Verificação do caminho do arquivo:

  • Confirmado public/fonts/RetroGaming.ttfque existe e /fonts/RetroGaming.ttfo caminho está correto para ativos públicos.

Nome da fonte:

  • Simplificado para RetroGamingFont(sem espaços).

Inspeção de ferramentas de desenvolvimento:

  • A classe verificada .font-custom-retroé aplicada, mas o cálculo font-familyusa o fallback.
  • Nenhum erro de rede para o arquivo de fonte.

Pergunta

Por que o Tailwind CSS v4 / PostCSS / Vite não está processando ou reconhecendo a @font-faceregra corretamente, impedindo que a fonte personalizada seja incluída na font-familydefinição da classe de utilitário? Existe alguma etapa de configuração específica para fontes personalizadas com Tailwind v4 e Vite que eu esteja esquecendo?

css