Construye rápidamente sitios web modernos sin salir de tu HTML.
Un framework CSS primero en utilidades repleto de clases como flex, pt-4, text-center y rotate-90 que pueden ser compuestas para construir cualquier diseño, directamente en tu marcado.
<div class="flex flex-col items-center rounded-2xl"> <div> <img class="size-48 shadow-xl" alt="" src="/img/cover.png" /> </div> <div class="flex"> <span>Guerra de Clases</span> <span>Los Antipatrones</span> <span class="flex"> <span>No. 4</span> <span>·</span> <span>2025</span> </span> </div></div>
Patrocinadores
Apoyado por los mejores.
Tailwind cuenta con el apoyo de socios y patrocinadores increíbles que hacen posible que un equipo de talentosos diseñadores e ingenieros mantenga el framework a tiempo completo.
¿Por qué Tailwind CSS?
Creado para la web moderna.
Tailwind es inconfundiblemente moderno y aprovecha todas las últimas y mejores características de CSS para hacer que la experiencia del desarrollador sea lo más agradable posible.
De acuerdo, no es exactamente de vanguardia, pero simplemente coloca un tamaño de pantalla frente a literalmente cualquier utilidad para aplicarla en un punto de interrupción específico.
Esta habitación soleada y espaciosa es para quienes viajan ligeros y buscan un lugar cómodo y acogedor donde descansar por una noche... Mostrar más
Mostrar más
¿Qué es un sitio web hoy en día sin algunos desenfoques de fondo? Sigue acumulando filtros hasta que tu diseñador te pida que, por favor, te detengas.
Si no eres fan de quemarte las retinas, simplemente coloca dark: delante de cualquier color para aplicarlo en modo oscuro.
Personalizar tu tema es tan simple como crear unas pocas variables CSS.
@theme { --font-sans: "Inter", sans-serif; --font-mono: "IBM Plex Mono", monospace; --text-tiny: 0.625rem; --text-tiny--line-height: 1.5rem; --color-mint-100: oklch(0.97 0.15 145); --color-mint-200: oklch(0.92 0.18 145); --color-mint-300: oklch(0.85 0.22 145); --color-mint-400: oklch(0.78 0.25 145); --color-mint-500: oklch(0.7 0.28 145); --color-mint-600: oklch(0.63 0.3 145); --color-mint-700: oklch(0.56 0.32 145); --color-mint-800: oklch(0.48 0.35 145); --color-mint-900: oklch(0.4 0.37 145); --color-mint-950: oklch(0.3 0.4 145);}La paleta de colores ahora utiliza colores de amplia gama más vibrantes sin que necesites entender qué significa nada de eso.
Usar utilidades de grid directamente en tu HTML hace que sea mucho más fácil razonar sobre diseños complejos.
Explorar propiedades
Transiciones que funcionan como esperarías: aplica unas pocas utilidades a un elemento y listo.
transition duration-750linear
transition duration-750ease-out
transition duration-750ease-in-out
transition duration-750ease-in
Tailwind utiliza capas de CSS para que no tengas que preocuparte por problemas de especificidad.
@layer theme, base, components, utilities;@layer theme { :root { /* Variables de tu tema */ }}@layer base { /* Estilos preestablecidos */}@layer components { /* Tus componentes personalizados */}@layer utilities { /* Tus clases de utilidad */}Soportar múltiples direcciones de texto de idiomas ya no es una pesadilla.
Etiqueta un elemento como contenedor para permitir que los hijos se adapten a los cambios en su tamaño.
<div class="@container"> <div class="grid grid-cols-1 @sm:grid-cols-2"> <img src="/img/photo-1.jpg" class="aspect-square @sm:aspect-3/2 object-cover" /> <img src="/img/photo-2.jpg" class="aspect-square @sm:aspect-3/2 object-cover" /> <img src="/img/photo-3.jpg" class="aspect-square @sm:aspect-3/2 object-cover" /> <img src="/img/photo-4.jpg" class="aspect-square @sm:aspect-3/2 object-cover" /> </div></div>No es necesario recordar esa complicada sintaxis de degradados: crea degradados sumamente suaves con solo unas pocas clases de utilidad.
Redefiniendo el rendimiento en tiempo real
Nuestro motor de renderizado de próxima generación ofrece velocidad y eficiencia inigualables, capacitando a los creadores a superar límites como nunca antes.
A veces dos dimensiones no son suficientes. Escala, rota y traslada cualquier elemento en un espacio 3D para añadir un toque de profundidad.
Cómo funciona
Envía más rápido y más pequeño.
Tailwind elimina automáticamente todo el CSS no utilizado al compilar para producción, lo que significa que tu paquete de CSS final será lo más pequeño posible. De hecho, la mayoría de los proyectos de Tailwind envían menos de 10kB de CSS al cliente.
<!DOCTYPE html><html lang="es"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Tailwind CSS</title> <link rel="stylesheet" href="/build.css" /> </head> <body> <button class=""></button> </body></html>@layer utilities {}Tailwind en el mundo real
Construye lo que quieras, sin tocar tu archivo CSS.
Debido a que Tailwind es de tan bajo nivel, nunca te incita a diseñar el mismo sitio dos veces. Algunos de tus sitios favoritos están construidos con Tailwind, y probablemente no tenías ni idea.
Componentes listos para usar
Avanza aún más rápido con Tailwind Plus.
Tailwind Plus es una colección de componentes de interfaz de usuario hermosos y totalmente responsivos, diseñados y desarrollados por nosotros, los creadores de Tailwind CSS. Cuenta con cientos de ejemplos listos para usar a tu elección y te garantiza encontrar el punto de partida perfecto para lo que deseas construir.
