Início / coding / Perguntas / 79575054
Accepted
Paul Martinez
Asked: 2025-04-15 19:46:12 +0800 CST

Fonte @font-face personalizada ignorada pelo Tailwind CSS v4 com Vite e React

  • 772

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

2 respostas

  1. Best Answer

    Configuração CSS-first (recomendado)

    A partir do TailwindCSS v4, o uso de tailwind.config.js foi descontinuado. Em vez disso, foi introduzida uma abordagem de configuração CSS-first. Na configuração CSS-first, você pode personalizar suas configurações usando a @themediretiva . Vários namespaces estão disponíveis para essa finalidade.

    Nota : Neste caso, o tailwind.config.jsarquivo pode ser excluído.

    Com o --font-*namespace, você pode declarar fontes.

    /* Still, I'll show an example using a font that's available online. */
@import url('https://fonts.cdnfonts.com/css/playground');

/* Note: The font won't work here due to the absence of an online TTF file. */
@font-face {
  font-family: 'RetroGamingFont';
  src: url('/fonts/RetroGaming.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}
    <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
<style type="text/tailwindcss">
@import 'tailwindcss';

@theme {
  --font-retro: 'RetroGamingFont', sans-serif;
  --font-playground: 'Playground', monospace;
  --color-clifford: #da373d;
}
</style>

<h1 class="font-retro text-clifford text-3xl font-bold underline">
  Hello world with Retro!
</h1>

<h1 class="font-playground text-clifford text-3xl font-bold underline">
  Hello world with Playground!
</h1>

    Configuração baseada em JavaScript legado

    Como alternativa, você ainda pode usar tailwind.config.jsvia a @configdiretiva.

    ./src/index.css

    @import 'tailwindcss';

@config './../tailwind.config.js';

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

    tailwind.config.js

    /** @type {import('tailwindcss').Config} */
export default {
  theme: {
    extend: {
      fontFamily: {
        'retro': ['RetroGamingFont', 'sans-serif'],
      },
    },
  },
  plugins: [],
}

    Observação : neste caso, não há necessidade de declarar contentpropriedade. O TailwindCSS v4 vem com detecção automática de origem.

    • 1

  2. O tailwind v4 não usa estilos da configuração, você precisará criar seus estilos diretamente no seu arquivo css e criar uma variável.

    @theme {
  --font-poppins: "Poppins", sans-serif;
}

    Você pode usar a fonte em seu HTML:

    <p class="font-poppins">Hello world</p>
    • 0

relate perguntas