Stylepack

Narzędzia

Motyw Tailwind z dowolnej strony

Wpisz adres strony i pobierz blok @theme dla Tailwind v4 z jej kolorami, rodzinami czcionek, zaokrągleniami, cieniami i breakpointami, gotowy do wklejenia do Twojego CSS.

Wypróbujstripe.comlinear.appairbnb.com

stripe.com

Zmierzono 4 dni temu.

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;
}
​
Otwórz pełną stronę z odpowiedziąOtwórz pakiet designu

Jak to działa

Stylepack otwiera stronę w prawdziwej przeglądarce, mierzy to, co się renderuje (a nie to, co mówi arkusz stylów) w czterech szerokościach i w obu motywach, a wynik zapisuje jako pakiet designu. Strona już zmierzona odpowiada od razu; nowa zajmuje mniej niż minutę. Każda wartość na tej stronie pochodzi z tego pakietu.

Pytania

Czy to Tailwind v3, czy v4?

Tailwind v4: blok @theme w CSS. Dla v3 te same wartości są dostępne jako zmienne CSS i JSON w narzędziu palety kolorów oraz w tokens.json w pakiecie designu.

Co jest w motywie?

Kolory nazwane według roli, rodziny czcionek z ich darmowymi zamiennikami, skala zaokrągleń, cienie i breakpointy, przy których strona zmienia układ, wszystko zmierzone na żywej stronie.

Jak utrzymać go w zgodzie ze stroną?

Otwórz w dowolnej chwili stronę pakietu tej witryny: Stylepack okresowo mierzy ponownie zaindeksowane strony, a pakiet zawiera datę pomiaru.