Gostaria de saber como utilizar fontes personalizadas no Tailwindcss... A instrutora não passou issa no curso.
Você está vendo a versão anterior da nova experiência da Alura que estamos preparando para você. Em breve, ela ganha uma identidade visual novinha totalmente pensada em potencializar seus estudos!
Gostaria de saber como utilizar fontes personalizadas no Tailwindcss... A instrutora não passou issa no curso.
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.