[Dúvida] Como utilizar fontes personalizadas no Tailwindcss? | Tailwind CSS: estilizando a sua página com classes utilitárias

Boa noite Fernando, não sei se é bem isso que estais querendo mais é bem simples:

1- Baixar ou importar a fonte personalizada:

Você pode baixar a fonte desejada ou utilizar um serviço como o Google Fonts para importar a fonte diretamente.

Exemplo com Google Fonts:

No seu arquivo HTML, importe a fonte desejada. Exemplo com a fonte Roboto:

<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">

2- Configurar o Tailwind CSS para reconhecer a fonte personalizada:

Você precisa adicionar a fonte ao arquivo de configuração tailwind.config.js. Para isso, siga este exemplo:

Exemplo de tailwind.config.js:

module.exports = {
  theme: {
    extend: {
      fontFamily: {
        // Adiciona a sua fonte personalizada
        'roboto': ['Roboto', 'sans-serif'],
      },
    },
  },
  plugins: [],
}

3- Utilizando a fonte personalizada no HTML:

Depois de configurar a fonte no tailwind.config.js, você pode aplicá-la em seus elementos HTML usando as classes do Tailwind. Exemplo:

<div class="font-roboto">
  Este texto está usando a fonte Roboto.
</div>

4- Exemplo completo:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Fontes Personalizadas no Tailwind</title>
  <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="font-roboto">
  <h1 class="text-3xl">Usando fontes personalizadas no Tailwind!</h1>
</body>
</html>

Se eu tiver conseguido te ajudar não esquece de marcar como a Solução. Ficarei a disposição para qualquer ajuda adicional.

Mergulhe em programação