Stylepack

Ferramentas

Tema Tailwind de qualquer site

Digite o endereço de um site e receba um bloco @theme do Tailwind v4 com suas cores, famílias de fontes, raios, sombras e breakpoints, pronto para colar no seu CSS.

Experimentestripe.comlinear.appairbnb.com

stripe.com

Medido há 4 dias.

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;
}
​
Abrir a página completa da respostaAbrir o pacote de design

Como funciona

O Stylepack abre o site em um navegador de verdade, mede o que é renderizado (não o que a folha de estilos diz) em quatro larguras e nos dois temas, e guarda o resultado como um pacote de design. Um site já medido responde na hora; um novo leva menos de um minuto. Todo valor nesta página vem desse pacote.

Perguntas

Isso é Tailwind v3 ou v4?

Tailwind v4: um bloco @theme em CSS. Para a v3, os mesmos valores estão disponíveis como variáveis CSS e JSON na ferramenta de paleta de cores e no tokens.json do pacote de design.

O que vem no tema?

Cores nomeadas por função, as famílias de fontes com suas substitutas gratuitas, a escala de raios, as sombras e os breakpoints em que o site muda de layout, tudo medido na página ao vivo.

Como mantenho o tema em sincronia com o site?

Abra a página do pacote do site quando quiser: o Stylepack mede de novo os sites indexados periodicamente e o pacote traz a data da medição.