Stylepack

Outils

Thème Tailwind de n’importe quel site web

Entrez l’adresse d’un site web et obtenez un bloc @theme Tailwind v4 avec ses couleurs, familles de polices, arrondis, ombres et points de rupture, prêt à coller dans votre CSS.

Essayezstripe.comlinear.appairbnb.com

linear.app

Mesuré il y a 4 jours.

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;
}
​
Ouvrir la page de réponse complèteOuvrir le pack de design

Comment ça marche

Stylepack ouvre le site dans un vrai navigateur, mesure ce qui s’affiche (et non ce que dit la feuille de style) à quatre largeurs et dans les deux thèmes, puis enregistre le résultat sous forme de pack de design. Un site déjà mesuré répond immédiatement ; un nouveau site prend moins d’une minute. Chaque valeur de cette page vient de ce pack.

Questions

Est-ce du Tailwind v3 ou v4 ?

Tailwind v4 : un bloc @theme en CSS. Pour la v3, les mêmes valeurs sont disponibles en variables CSS et en JSON sur l’outil de palette de couleurs et dans le tokens.json du pack de design.

Que contient le thème ?

Les couleurs nommées par rôle, les familles de polices avec leurs substituts gratuits, l’échelle d’arrondis, les ombres et les points de rupture où le site change de mise en page, le tout mesuré sur la page en ligne.

Comment le garder synchronisé avec le site ?

Ouvrez la page du pack du site à tout moment : Stylepack remesure périodiquement les sites indexés et le pack indique la date de mesure.