Stylepack

Tools

Tailwind-Theme aus einer Website

Gib eine Website-Adresse ein und erhalte einen Tailwind v4 @theme-Block mit ihren Farben, Schriftfamilien, Radien, Schatten und Breakpoints, fertig zum Einfügen in dein CSS.

Probierstripe.comlinear.appairbnb.com

airbnb.com

vor 4 Tagen gemessen.

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;
}
​
Ganze Antwortseite öffnenDesignpaket öffnen

So funktioniert es

Stylepack öffnet die Website in einem echten Browser, misst, was gerendert wird (nicht, was im Stylesheet steht), in vier Breiten und in beiden Themes, und speichert das Ergebnis als Designpaket. Eine bereits gemessene Website antwortet sofort; eine neue braucht unter einer Minute. Jeder Wert auf dieser Seite stammt aus diesem Paket.

Fragen

Ist das Tailwind v3 oder v4?

Tailwind v4: ein @theme-Block in CSS. Für v3 gibt es dieselben Werte als CSS-Variablen und JSON im Farbpaletten-Tool und in der tokens.json des Designpakets.

Was steckt im Theme?

Farben nach Rolle benannt, die Schriftfamilien mit ihren freien Alternativen, die Radius-Skala, die Schatten und die Breakpoints, an denen die Website ihr Layout ändert, alles gemessen auf der Live-Seite.

Wie halte ich es mit der Website synchron?

Öffne jederzeit die Paketseite der Website: Stylepack misst indexierte Websites regelmäßig neu, und das Paket trägt das Messdatum.