CursosEmpresasBlogLiveConfPrecios

Contenido del curso

No sé dónde empezar

Proyecto: Platzi Travel

Tomar examen

Personalizar cores e fontes no Tailwind Config

Resumen

Configurar um sistema de design no Tailwind CSS transforma um projeto genérico em algo com identidade visual própria. Vais aprender a personalizar o ficheiro de configuração do Tailwind para definir cores, tipografias e imagens de fundo a partir de um design feito em Figma, criando classes utilitárias prontas para usar no teu HTML.

Este fluxo é ideal para quem está a dar os primeiros passos com utility-first CSS e quer perceber como o Tailwind se adapta ao branding de qualquer projeto.

Como automatizar a compilação do Tailwind com npm scripts?

Antes de mexer no design, vale a pena poupar tempo. Em vez de escrever o comando completo de compilação cada vez que fazes uma alteração, podes criar um script dentro do package.json que resume tudo numa linha curta.

Dentro da secção scripts, adicionas uma vírgula após o último item e crias uma nova entrada chamada tw ou tailwind build. O comando associado deve apontar o ficheiro de entrada (source/css/tailwind.css) e o ficheiro de saída compilado (public/css/tailwind.css) usando a flag -i.

A partir daqui, basta correr no terminal:

Como compilo o Tailwind depois de configurar o script? Executas npm run tailwind build no terminal. O Tailwind lê o ficheiro de configuração, gera as classes personalizadas e atualiza o CSS público do projeto [03:45].

O que é o ficheiro de configuração do Tailwind e como personalizá-lo?

O ficheiro tailwind.config.js está dividido em quatro blocos principais que vais reconhecer rapidamente:

  • purge: limpa as classes que não estás a usar para reduzir o tamanho final do CSS.
  • darkMode: define como integras o modo escuro no projeto.
  • theme: o coração da personalização, onde adicionas cores, tipografias e imagens.
  • variants e plugins: extensões opcionais para casos avançados.

O trabalho pesado acontece dentro de theme.extend, porque assim manténs as classes nativas do Tailwind e adicionas as tuas por cima sem sobrescrever nada.

Como adicionar imagens de fundo personalizadas no Tailwind?

Primeiro, organizas as imagens. Cria uma pasta public/image e move para lá todos os ficheiros (por exemplo, san-francisco.jpg). Depois, dentro de theme.extend, declaras a propriedade backgroundImage como um objeto.

Cada chave do objeto é o nome da tua classe e o valor é a função url() com o caminho da imagem:

js backgroundImage: { 'san-francisco': "url('../image/san-francisco.jpg')", }

Depois da próxima compilação, podes usar bg-san-francisco diretamente no HTML.

Como definir uma paleta de cores primária, secundária e terciária?

A paleta sai diretamente do Figma. Copias o código hexadecimal de cada cor e levas para o ficheiro de configuração. Para preservar as cores nativas do Tailwind, importas o módulo colors no topo do ficheiro e fazes spread dentro do backgroundColor e textColor.

A estrutura fica assim:

  • primary: cor principal extraída do Figma.
  • secondary: o verde definido no design.
  • tertiary: o azul de apoio.

É importante repetir as mesmas cores em textColor se quiseres aplicá-las também a textos. Caso contrário, classes como text-primary não vão existir e o Tailwind não as gera.

Por que tenho de recompilar sempre que edito o config? Porque o Tailwind funciona em build time. Cada alteração ao tailwind.config.js só passa para o CSS final depois de correres npm run tailwind build [05:20].

Como integrar tipografias do Google Fonts no Tailwind?

A fonte escolhida no projeto é a Montserrat. O processo tem dois momentos: importar no HTML e registar no config.

No Google Fonts, escolhes a variante (neste caso Regular 400), copias a tag <link> e colocas no <head> do index.html. A seguir, no theme.extend, adicionas a propriedade fontFamily como um objeto onde a chave é o nome da classe e o valor é uma array com a fonte e o fallback:

js fontFamily: { montserrat: ['Montserrat', 'sans-serif'], }

Depois de compilar, aplicas font-montserrat em qualquer elemento HTML, como uma tag <p>, e a tipografia fica ativa.

Quando vale a pena desativar o IntelliSense do Tailwind?

A extensão IntelliSense é útil para autocompletar classes, mas dentro do ficheiro de configuração pode mostrar avisos constantes que atrapalham o fluxo. Podes desativá-la temporariamente enquanto editas o config e voltar a ligá-la quando estiveres no HTML, onde o autocompletar realmente faz diferença.

Que diferença faz ter um sistema de design no projeto?

Quando defines cores, fontes e imagens no config, deixas de escrever valores soltos no HTML e passas a usar uma linguagem visual consistente. Classes como bg-primary, text-secondary ou font-montserrat ficam disponíveis em todo o projeto e qualquer alteração na paleta propaga-se automaticamente.

Isso traduz-se em três ganhos práticos:

  1. Manutenção mais simples, porque mudas a cor num sítio só.
  2. Coerência visual, porque todos os componentes partilham os mesmos valores.
  3. Velocidade de desenvolvimento, porque o autocomplete sugere as tuas classes personalizadas.

Se ainda não criaste a tua própria paleta, é o momento certo para experimentar. Escolhe duas ou três cores que gostes, uma tipografia do Google Fonts e monta o teu próprio sistema. Conta nos comentários que combinação escolheste.