Stylepack

Herramientas

Tema de Tailwind de cualquier web

Escribe la dirección de una web y obtén un bloque @theme de Tailwind v4 con sus colores, familias tipográficas, radios, sombras y breakpoints, listo para pegar en tu CSS.

Prueba constripe.comlinear.appairbnb.com

airbnb.com

Medido hace 4 días.

background#ffffffsurface#ddddddsurface-2#f2f2f2foreground#222222muted-foreground#6c6c6cprimary#da1249on-primary#ffffffborder#ffffff
tailwind.css
/* Tailwind v4 theme extracted from https://www.airbnb.com/ */
@import "tailwindcss";
​
@theme {
  --color-background: #ffffff;
  --color-surface: #dddddd;
  --color-surface-2: #f2f2f2;
  --color-foreground: #222222;
  --color-muted-foreground: #6c6c6c;
  --color-primary: #da1249;
  --color-on-primary: #ffffff;
  --color-border: #ffffff;
  --font-sans: "Airbnb Cereal VF", "Inter", sans-serif;
  --font-display: "Airbnb Cereal VF", Circular, -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", sans-serif;
  --radius-none: 0px;
  --radius-2xl: 100px;
  --radius-xl: 20px;
  --radius-md: 8px;
  --radius-lg: 14px;
  --radius-full: 9999px;
  --shadow-sm: color(srgb 0 0 0 / 0.02) 0px 0px 0px 1px, color(srgb 0 0 0 / 0.04) 0px 2px 6px 0px, color(srgb 0 0 0 / 0.1) 0px 4px 8px 0px;
  --shadow-md: rgba(0, 0, 0, 0.5) 0px -6px 15px 0px, rgba(0, 0, 0, 0.08) 0px 4px 4px 0px, rgba(0, 0, 0, 0.18) 0px 12px 15px 0px;
  --shadow-lg: rgba(218, 218, 218, 0.6) 0px 0.5px 1px 0px, rgba(0, 0, 0, 0.12) 0px -0.502px 1.004px 0px, rgba(0, 0, 0, 0.04) 0px -1.5px 3.5px 0px, rgba(0, 0, 0, 0.05) 0px 3px 5px 0px, rgba(0, 0, 0, 0.2) 0px 0.75px 1px 0px inset, rgba(34, 34, 34, 0.6) 0px -0.5px 5px 1px inset, rgba(0, 0, 0, 0.16) 0.502px 0.5px 2px 0px inset, rgba(0, 0, 0, 0.12) 0px -3px 7px 0px inset, rgba(0, 0, 0, 0.05) 0.502px 2px 4px 0px inset, rgba(0, 0, 0, 0.04) 1.004px 4px 4px 0px inset, rgba(184, 72, 155, 0.2) 0px -3px 7px 0px inset;
  --shadow-xl: rgba(0, 0, 0, 0.16) 0px 2px 2px 0px, rgba(255, 255, 255, 0.04) 1px 1.5px 3px 0px inset, rgba(255, 255, 255, 0.04) -1px 1.25px 3px 0px inset, rgba(255, 56, 92, 0.3) 0px -1px 3px 0px inset, rgba(0, 0, 0, 0.16) 0px -1px 2px 0px inset;
  --breakpoint-bp1: 743px;
  --breakpoint-bp2: 744px;
  --breakpoint-bp3: 950px;
  --breakpoint-bp4: 1128px;
  --breakpoint-bp5: 1440px;
}
​
Abrir la página con la respuesta completaAbrir el paquete de diseño

Cómo funciona

Stylepack abre el sitio en un navegador real, mide lo que se renderiza (no lo que dice la hoja de estilos) en cuatro anchos y en ambos temas, y guarda el resultado como un paquete de diseño. Un sitio ya medido responde al instante; uno nuevo tarda menos de un minuto. Cada valor de esta página sale de ese paquete.

Preguntas

¿Es Tailwind v3 o v4?

Tailwind v4: un bloque @theme en CSS. Para v3, los mismos valores están disponibles como variables CSS y JSON en la herramienta de paleta de colores y en el tokens.json del paquete de diseño.

¿Qué contiene el tema?

Colores nombrados por rol, las familias tipográficas con sus sustitutas gratuitas, la escala de radios, las sombras y los breakpoints en los que el sitio cambia de maquetación, todo medido en la página en vivo.

¿Cómo lo mantengo sincronizado con el sitio?

Abre la página del paquete del sitio cuando quieras: Stylepack vuelve a medir periódicamente los sitios indexados y el paquete lleva la fecha de medición.