Construye rápidamente sitios web modernos sin salir de tu HTML.

Un framework CSS utility-first repleto de clases como flex, pt-4, text-center y rotate-90 que se pueden componer para crear cualquier diseño, directamente en tu marcado.

Empezar

<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>Class Warfare</span>    <span>The Anti-Patterns</span>    <span class="flex">      <span>Nro. 4</span>      <span>·</span>      <span>2025</span>    </span>  </div></div>

Class WarfareThe Anti-PatternsNro. 4·2025

¿Por qué Tailwind CSS?

Hecho para la web moderna.

Tailwind es moderno sin complejos y aprovecha todas las últimas y mejores características de CSS para hacer que la experiencia del desarrollador sea lo más agradable posible.

Diseño Responsive

Bueno, no es exactamente lo último, pero simplemente agrega un tamaño de pantalla delante de literalmente cualquier utilidad para aplicarla en un breakpoint específico.

Móvil

Casa enteraCasa de playa en el lago Hurón

Casa entera

Casa de playa en el lago Hurón2.66(128 reseñas)·Bayfield, ON

Esta habitación soleada y espaciosa es para aquellos que viajan ligeros y buscan un lugar cómodo y acogedor donde pasar la noche... Mostrar más

Filtros

¿Qué es un sitio web en estos días sin algunos `backdrop-blur`? Sigue apilando filtros hasta que tu diseñador te pida por favor, por favor que pares.

blur-sm

brightness-150

grayscale

contrast-150

saturate-200

sepia

Modo oscuro

Si no eres fan de quemarte las retinas, simplemente pon dark: delante de cualquier color para aplicarlo en modo oscuro.

Variables CSS

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);
}

Colores P3

La paleta de colores ahora usa colores de gama amplia más vibrantes sin que necesites entender qué significa nada de eso.

red

orange

amber

yellow

lime

green

emerald

teal

cyan

sky

blue

indigo

violet

purple

fuchsia

pink

rose

950

900

800

700

600

500

400

300

200

100

Diseño de CSS Grid

Usar las utilidades de grid directamente en tu HTML hace que sea mucho más fácil razonar sobre diseños complejos.

Explorar propiedades

Casas en el árbol

Mansiones

Cabañas frente al lago

Casas de diseño

Transiciones y animaciones

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

Capas en cascada

Tailwind usa capas CSS para que no tengas que preocuparte por problemas de especificidad.

@layer theme, base, components, utilities;
@layer theme {
  :root {
    /* Tus variables de tema */
  }
}
@layer base {
  /* Estilos Preflight */
}
@layer components {
  /* Tus componentes personalizados */
}
@layer utilities {
  /* Tus clases de utilidad */
}

Propiedades lógicas

Soportar múltiples direcciones de texto ya no es una pesadilla.

ltr

rtl

Will WintonDirector de Operaciones

Kristin YardlyCoordinador de Marketing

Emanual CuccittiniIngeniero de planta

Kiara SmithVP de Ingeniería

سارة أحمدمديرة مشاريع

علي محمدمطور برمجيات

خالد عمرمصمم واجهات المستخدم

Container queries

Etiqueta un elemento como un `container` 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>

Gradientes

No necesitas recordar esa complicada sintaxis de gradiente — crea gradientes suaves como la seda con solo unas pocas clases de utilidad.

Poder y Precisión

Redefiniendo el rendimiento en tiempo real

Nuestro motor de renderizado de próxima generación ofrece velocidad y eficiencia inigualables, permitiendo a los creadores superar los límites como nunca antes.

Rendimiento del tiempo de renderizado

6.4x

Velocidad de fotogramas en tiempo real

4.2x

Tiempo de compilación multiplataforma

2.7x

Transformaciones 3D

A veces dos dimensiones no son suficientes. Escala, rota y traslada cualquier elemento en el espacio 3D para añadir un toque de profundidad.

Cómo funciona

Envía más rápido y más pequeño.

text-base text-gray-950

Tailwind elimina automáticamente todo el CSS no utilizado al compilar para producción, lo que significa que tu paquete final de CSS es 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="en">  <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 Acción

Construye lo que quieras, sin tocar tu archivo CSS.

text-base text-gray-950

Debido a que Tailwind es de tan bajo nivel, nunca te anima 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

Muévete aún más rápido con Tailwind Plus.

Tailwind Plus es una colección de hermosos componentes de UI totalmente Responsive, diseñados y desarrollados por nosotros, los creadores de Tailwind CSS. Tiene cientos de ejemplos listos para usar para elegir, y está garantizado que te ayudará a encontrar el punto de partida perfecto para lo que quieras construir.

Explora Tailwind Plus