Se você tem trabalhado com Tailwind CSS, sabe que ele não segue a abordagem tradicional ao estilizar UIs ricas em conteúdo, como blogs e páginas de documentação. Isso pode tornar o uso da biblioteca tedioso e repetitivo para esses casos.

O Tailwind remove todos os estilos padrão do navegador, o que é benéfico para a maioria dos casos, mas pode ser problemático ao estilizar conteúdo que você não controla, como texto rico de um CMS.

Para resolver isso, a equipe do Tailwind lançou o plugin Typography, que oferece uma tipografia pré-estilizada e bela. Este artigo explica como configurá-lo e usá-lo em seu projeto.

O que é o plugin Tailwind Typography?

O plugin Tailwind Typography é um plugin oficial que transforma conteúdo HTML bruto e não estilizado em uma tipografia limpa e bem formatada usando a classe utilitária prose.

Ele aplica um conjunto equilibrado de padrões tipográficos aos elementos filhos de qualquer contêiner em que é aplicado, estilizando automaticamente elementos como parágrafos, cabeçalhos e listas.

Quando usar o plugin Typography

O melhor momento para usar o plugin Tailwind Typography é ao lidar com conteúdo que você não tem controle direto, como strings HTML geradas por CMS ou Markdown. Por exemplo, se o conteúdo da página for escrito diretamente em HTML, ele inicialmente aparecerá sem estilo devido à remoção dos estilos padrão pelo Tailwind.

Começando com @tailwindcss/typography

Para começar a usar o plugin Tailwind Typography, certifique-se de que o Node.js esteja instalado e que o Tailwind esteja configurado no seu projeto. Execute o seguinte comando para instalar o plugin:

npm install -D @tailwindcss/typography

Após a instalação, configure-o de acordo com a versão do Tailwind que você está usando.

Uso básico do plugin Typography

Adicionar a classe prose ao elemento que envolve seu conteúdo fará com que ele seja formatado automaticamente.

Personalização: Além do básico

O plugin Tailwind Typography oferece várias maneiras de personalizar a aparência para atender às suas necessidades de design. Você pode usar classes de modificador prose para definir cores tipográficas e até criar temas de cores personalizados usando a API theme.extend.typography no arquivo de configuração do Tailwind.

Suporte ao modo escuro

O plugin oferece o modificador dark:prose-invert, que inverte a cor da tipografia com base no tema de cor atual, adaptando-se automaticamente ao tema claro ou escuro.

Dicas e solução de problemas

Embora o plugin seja excelente para tornar o texto limpo e legível, ele tem algumas peculiaridades. Evite conflitos de especificidade e certifique-se de usar sintaxes Markdown consistentes para evitar renderizações inesperadas.

Conclusão

O Tailwind prose economiza tempo ao lidar com conteúdo não controlado diretamente. Se ainda não faz parte do seu setup, experimente agora. Feliz codificação!