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

linear.app

vor 4 Tagen gemessen.

background#08090asurface#101112surface-2#1c1d1esurface-3#07220aforeground#f7f8f8muted-foreground#8a8f98primary#e5e5e6on-primary#111111
tailwind.css
/* Tailwind v4 theme extracted from https://linear.app/ */
@import "tailwindcss";
​
@theme {
  --color-background: #08090a;
  --color-surface: #101112;
  --color-surface-2: #1c1d1e;
  --color-surface-3: #07220a;
  --color-foreground: #f7f8f8;
  --color-muted-foreground: #8a8f98;
  --color-primary: #e5e5e6;
  --color-on-primary: #111111;
  --color-secondary: #5e6ad2;
  --color-border: #1c1d1e;
  --font-sans: "Inter Variable", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
  --font-display: "Inter Variable", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
  --font-mono: "Berkeley Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --radius-none: 0px;
  --radius-full: 9999px;
  --radius-lg: 12px;
  --radius-sm: 4px;
  --shadow-sm: rgba(0, 0, 0, 0.2) 0px 0px 0px 1px;
  --shadow-md: rgba(0, 0, 0, 0.2) 0px 0px 12px 0px inset;
  --shadow-lg: rgba(0, 0, 0, 0.25) 0px 2px 32px 0px;
  --shadow-xl: rgba(255, 255, 255, 0.05) 0px 0px 0px 1px inset;
  --breakpoint-bp1: 640px;
  --breakpoint-bp2: 768px;
  --breakpoint-bp3: 928px;
  --breakpoint-bp4: 1024px;
  --breakpoint-bp5: 1280px;
  --container-content: 1344px;
}
​
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.