𝗗𝗮𝘆 𝟰𝟱 𝗼𝗳 𝗟𝗲𝗮𝗿𝗻𝗶𝗻𝗴 𝗠𝗘𝗥𝗡 𝗦𝘁𝗮𝗰𝗸

𝗗𝗶𝗮 𝟰𝟱 𝗱𝗲 𝗔𝗽𝗿𝗲𝗻𝗱𝗶𝘇𝗮𝗴𝗲𝗺 𝗱𝗮 𝗦𝘁𝗮𝗰𝗸 𝗠𝗘𝗥𝗡

Estou no dia 45 da minha jornada full-stack.

Ontem aprendi roteamento com Express para páginas HTML estáticas. Hoje foquei no Tailwind CSS.

Deixei de lado arquivos CSS grandes. Agora utilizo um fluxo de trabalho utility-first. Isso torna o trabalho de design mais rápido.

O Tailwind oferece classes utilitárias. Você usa essas classes para construir layouts personalizados diretamente no seu HTML.

Aqui está o meu processo técnico:

• Instalei o Tailwind usando pacotes npm em vez de um CDN.
• Instalei o núcleo do compilador com npm install -D tailwindcss.
• Configurei a configuração com npx tailwindcss init.

Também aprendi como o Tailwind reduz o tamanho do arquivo. Ele utiliza tree-shaking para remover estilos não utilizados.

Configurei o caminho de conteúdo no tailwind.config.js para escanear meus arquivos HTML e JS:

module.exports = { content: ["./public/**/*.{html,js}"], theme: { extend: {}, }, plugins: [], }

Essa configuração garante que meu arquivo CSS final permaneça pequeno e rápido.

Fonte: https://dev.to/ali_hamza_589ec7b3eb6688d/day-45-of-learning-mern-stack-ai3