🎨 Tailwind CSS v4: Sistema de Diseño y Estilizado
Motor de Estilizado Utilitario Moderno
En Dev Env Pro se utiliza Tailwind CSS v4 mediante el plugin nativo de Vite (
@tailwindcss/vite). La versión 4 elimina la necesidad detailwind.config.jstradicional, permitiendo una configuración directa en CSS con variables nativas y rendimiento de compilación instantáneo.
⚡ Novedades y Ventajas de Tailwind CSS v4
- Motor Rust / Lightning CSS: Compilación entre 5x y 10x más rápida que la versión 3.
- Configuración CSS-First: Se definen los temas directamente en
src/styles/global.cssusando@theme. - Integración sin fricción: Cero dependencias complejas de PostCSS; se conecta directo a Vite en
astro.config.mjs.
🎨 Paleta y Tokens del Proyecto (Terminal & Cohere Theme)
@import "tailwindcss";
@theme {
--color-canvas-white: #ffffff;
--color-near-black: #17171c;
--color-enterprise-green: #003c33;
--color-dark-navy: #071829;
--color-soft-stone: #eeece7;
--color-action-blue: #1863dc;
--color-border-hairline: #d9d9dd;
--font-display: "Space Grotesk", sans-serif;
--font-body: "Inter", sans-serif;
--font-code: "JetBrains Mono", monospace;
}🎯 Componentes de Diseño Clave
- Bloques de Código de Terminal: Tarjetas oscuras (
#17171c) con cabecera de consola, botón de copiado al portapapeles y pestañas de shell (Bash/Zsh/PowerShell). - Callouts Accesibles: Indicadores visuales de color con alto contraste (cumplimiento WCAG AA / AAA) para notas, advertencias y consejos prácticos.