Instalación
Formas de instalación de Tailwind CSS.
Instalación de Tailwind CSS
La instalación de Tailwind es sencilla, pero ofrece distintas formas de llevarse a cabo dependiendo de tu entorno de desarrollo. Lo ideal es acudir siempre a su documentación oficial, donde se detallan paso a paso las instrucciones actualizadas.
Allí se pueden ver muy fácilmente las 4 formas principales de instalarlo:
- Instalación mediante CLI (Command Line Interface): Esta es considerada la forma "principal" o por defecto, ya que permite instalar y ejecutar Tailwind de manera global o local en un proyecto estático sin dependencias complejas.
- Uso de Tailwind como plugin de PostCSS: Esta es la forma más versátil si ya posees un proceso de build configurado (como Webpack, Rollup o Vite) y quieres integrar Tailwind junto con otros plugins de CSS.
- Instalación con un Framework (Astro, Angular, Vue, React, etc.): Cada framework moderno tiene su propia guía para integrar Tailwind. Muchos de ellos simplifican este proceso enormemente mediante comandos propios (por ejemplo, en Astro se instala ejecutando
npx astro add tailwind). - Usando Play CDN: Esta es la forma más ligera y rápida de empezar a probar Tailwind, ya que solo requiere agregar una etiqueta
<script>en el HTML. Sin embargo, no es recomendada para producción, ya que sirve únicamente para desarrollo rápido o prototipado debido a problemas de rendimiento asociados a compilar CSS en el navegador del usuario en tiempo de ejecución.
Para ver las guías detalladas de cada método, puedes consultar la documentación oficial: https://tailwindcss.com/docs/installation
¿Qué es Tailwind CSS? Comparativa y Filosofía
Entiende qué es Tailwind CSS, su enfoque Utility-First y cómo se diferencia de frameworks tradicionales como Bootstrap o del uso de CSS puro.
Colores, Tamaños y Otras Utilidades
Aprende a usar y personalizar colores, gradientes, opacidades, tamaños, márgenes, flexbox y grid en Tailwind CSS, incluyendo las diferencias entre Tailwind 3 y 4.