Día 45 aprendiendo el MERN Stack

Estoy en el día 45 de mi camino como desarrollador full-stack.

Ayer aprendí el enrutamiento de Express para páginas HTML estáticas. Hoy me enfoqué en Tailwind CSS.

Dejé de usar archivos CSS de gran tamaño. Ahora utilizo un flujo de trabajo basado en utilidades (utility-first). Esto hace que el trabajo de diseño sea más rápido.

Tailwind te proporciona clases de utilidad. Utilizas estas clases para construir diseños personalizados directamente en tu HTML.

Aquí está mi proceso técnico:

  • Instalé Tailwind usando paquetes npm en lugar de un CDN.
  • Instalé el núcleo del compilador con npm install -D tailwindcss.
  • Configuré la configuración con npx tailwindcss init.

También aprendí cómo Tailwind reduce el tamaño del archivo. Utiliza tree-shaking para eliminar los estilos no utilizados.

Configuré la ruta de contenido en tailwind.config.js para escanear mis archivos HTML y JS:

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

Esta configuración garantiza que mi archivo CSS final se mantenga pequeño y rápido.

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