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

stripe.com

vor 4 Tagen gemessen.

background#ffffffsurface#e5edf5surface-2#ffe0efsurface-3#ffe0d1foreground#061b31muted-foreground#64748dprimary#533afdon-primary#ffffff
tailwind.css
/* Tailwind v4 theme extracted from https://stripe.com/ */
@import "tailwindcss";
​
@theme {
  --color-background: #ffffff;
  --color-surface: #e5edf5;
  --color-surface-2: #ffe0ef;
  --color-surface-3: #ffe0d1;
  --color-foreground: #061b31;
  --color-muted-foreground: #64748d;
  --color-primary: #533afd;
  --color-on-primary: #ffffff;
  --color-secondary: #0f4d29;
  --color-border: #e5edf5;
  --font-sans: sohne-var, "SF Pro Display", sans-serif;
  --font-display: sohne-var, "SF Pro Display", sans-serif;
  --radius-none: 0px;
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-full: 9999px;
  --shadow-sm: rgba(3, 3, 39, 0.25) 0px 14.088px 21.132px -14.088px, rgba(0, 0, 0, 0.1) 0px 8.453px 16.906px -8.453px;
  --shadow-md: rgba(50, 50, 93, 0.25) 0px 30px 45px -30px, rgba(0, 0, 0, 0.1) 0px 18px 36px -18px;
  --shadow-lg: rgba(23, 23, 23, 0.08) 0px 15px 35px 0px;
  --shadow-xl: rgba(23, 23, 23, 0.06) 0px 3px 6px 0px;
  --breakpoint-bp1: 600px;
  --breakpoint-bp2: 639px;
  --breakpoint-bp3: 640px;
  --breakpoint-bp4: 939px;
  --breakpoint-bp5: 940px;
  --container-content: 1232px;
}
​
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.