Olá, eu sou Maneshwar. Estou construindo LiveReview, uma ferramenta privada de revisão de código de IA que é executada na sua chave LLM (Openai, Gêmeos, etc.) com preços altamente competitivos – construídos para pequenas equipes. Verifique e experimente! A tipografia desempenha um grande papel na forma como seu aplicativo se sente. Por padrão, o Tailwind CSS navios com um conjunto de fontes do sistema, mas a maioria dos projetos precisa de algo único. Felizmente, é muito fácil integrar fontes do Google ao React e Tailwind CSS. Neste blog, passaremos a adicionar a fonte EB Garamond do Google Fontes em um projeto React + Tailwind. Etapa 1: Escolha uma fonte do Google de cabeça para as fontes do Google e selecione a fonte desejada. Para este tutorial, usaremos o EB Garamond. Ao clicar na fonte, você verá uma seção de código de incorporação que se parece com o seguinte: rel = “Preconnect” href = “rel =” Preconnect “href =” Crossorigin> href = “rel =” Stylesheet “> Digite o modo de tela completo. lang=”en”> charset=”utf-8″ /> rel=”icon” href=”%PUBLIC_URL%/favicon.ico” /> name=”viewport” content=”width=device-width, initial-scale=1″ /> React App with Tailwind rel=”preconnect” href=” rel=”preconnect” href=” crossorigin> href=” rel = “STILELES SHEET”> ID = “ROOT”> Digite o modo de tela de tela cheia Modo de tela cheia Etapa 3: Extenha o arquivo da Tailwind em seguida, abra seu arquivo Tailwind.config.js e estenda a família de fontes com sua nova fonte do Google. // tailwind.config.js module.exports = {content: [
“./src/**/*.{js,jsx,ts,tsx}”,
]tema: {estend: {fontfamily: {‘eb-gaaramond’: [‘EB Garamond’, ‘serif’],},},}, plugins: [],} Digite o modo de saída do modo de tela cheia, diz a Tailwind que agora você tem uma nova classe de utilitário de font Font-eb-Garamond. Etapa 4: use a fonte nos componentes agora, você pode usar a fonte em qualquer lugar dos seus componentes do React: Export Função padrão app () {return (