Marc Parra

Buscar en el sitio

Accede al laboratorio, el repositorio, proyectos y rutas principales.

Repositorio
Repositorio

Frameworks

Tailwind CSS

Framework CSS utility-first para construir interfaces desde clases composables.

Genera estilos a partir de utilidades usadas en las plantillas y permite definir tokens, variantes, responsive y estados sin una capa de componentes obligatoria.

Ir al sitio oficial

Ficha abierta

Para qué sirve y cómo encaja

Genera estilos a partir de utilidades usadas en las plantillas y permite definir tokens, variantes, responsive y estados sin una capa de componentes obligatoria.

Útil para productos y sistemas de diseño que quieren velocidad, consistencia y control sin escribir mucho CSS ad hoc.

Puede degradar la legibilidad si no se definen componentes, tokens y criterios claros para reutilizar patrones.

Uso en tu proyecto

Instalación e importación

Comandos y fragmentos tomados de la documentación oficial. Elige tu caso, cópialos tal cual o pásale el prompt a tu agente.

npm
npm install tailwindcss @tailwindcss/vite
vite.config
import tailwindcss from "@tailwindcss/vite";

export default defineConfig({
  plugins: [tailwindcss()],
});
css
@import "tailwindcss";

Prompt para que tu agente lo instale

Pega esto en Cursor, Claude Code, Codex u otro agente de código:

Prompt
Instala Tailwind CSS en este proyecto (contexto: Vite). Documentación oficial: https://tailwindcss.com/docs/installation. Comando verificado: `npm install tailwindcss @tailwindcss/vite`. Haz solo la instalación o importación base indicada en esta pestaña; no asumas stack ni configuración del proyecto. Cuando termines, pregunta al usuario cómo quiere integrarlo o qué contexto necesitas para los siguientes pasos.

Planes y modelos

Cómo se paga y qué incluye cada opción

  1. 01

    Open source

    El framework y su CLI son gratuitos bajo licencia MIT, incluida la versión 4 con configuración en CSS.

    Gratis
  2. 02

    Tailwind Plus

    Pago único con acceso de por vida: 249 € para uso personal y 849 € para equipos de hasta 25 personas, con bloques UI, plantillas y Catalyst.

    Tailwind Plus

Funcionalidades

Qué puedes hacer con ella

  1. 01

    Utility-first

    Compone estilos directamente mediante clases pequeñas y predecibles.

  2. 02

    Diseño responsivo

    Aplica breakpoints, estados y variantes con prefijos consistentes.

  3. 03

    Build optimizado

    Genera CSS a partir de las clases detectadas en el proyecto.

Cuándo usarla

Dónde encaja y dónde no

Te conviene si…

Útil para productos y sistemas de diseño que quieren velocidad, consistencia y control sin escribir mucho CSS ad hoc.

Mejor otra opción si…

Puede degradar la legibilidad si no se definen componentes, tokens y criterios claros para reutilizar patrones.

Alternativas

Otras herramientas del repositorio