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

airbnb.com

Zmierzono 4 dni temu.

background#ffffffsurface#ddddddsurface-2#f2f2f2foreground#222222muted-foreground#6c6c6cprimary#da1249on-primary#ffffffborder#ffffff
tailwind.css
/* Tailwind v4 theme extracted from https://www.airbnb.com/ */
@import "tailwindcss";
​
@theme {
  --color-background: #ffffff;
  --color-surface: #dddddd;
  --color-surface-2: #f2f2f2;
  --color-foreground: #222222;
  --color-muted-foreground: #6c6c6c;
  --color-primary: #da1249;
  --color-on-primary: #ffffff;
  --color-border: #ffffff;
  --font-sans: "Airbnb Cereal VF", "Inter", sans-serif;
  --font-display: "Airbnb Cereal VF", Circular, -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", sans-serif;
  --radius-none: 0px;
  --radius-2xl: 100px;
  --radius-xl: 20px;
  --radius-md: 8px;
  --radius-lg: 14px;
  --radius-full: 9999px;
  --shadow-sm: color(srgb 0 0 0 / 0.02) 0px 0px 0px 1px, color(srgb 0 0 0 / 0.04) 0px 2px 6px 0px, color(srgb 0 0 0 / 0.1) 0px 4px 8px 0px;
  --shadow-md: rgba(0, 0, 0, 0.5) 0px -6px 15px 0px, rgba(0, 0, 0, 0.08) 0px 4px 4px 0px, rgba(0, 0, 0, 0.18) 0px 12px 15px 0px;
  --shadow-lg: rgba(218, 218, 218, 0.6) 0px 0.5px 1px 0px, rgba(0, 0, 0, 0.12) 0px -0.502px 1.004px 0px, rgba(0, 0, 0, 0.04) 0px -1.5px 3.5px 0px, rgba(0, 0, 0, 0.05) 0px 3px 5px 0px, rgba(0, 0, 0, 0.2) 0px 0.75px 1px 0px inset, rgba(34, 34, 34, 0.6) 0px -0.5px 5px 1px inset, rgba(0, 0, 0, 0.16) 0.502px 0.5px 2px 0px inset, rgba(0, 0, 0, 0.12) 0px -3px 7px 0px inset, rgba(0, 0, 0, 0.05) 0.502px 2px 4px 0px inset, rgba(0, 0, 0, 0.04) 1.004px 4px 4px 0px inset, rgba(184, 72, 155, 0.2) 0px -3px 7px 0px inset;
  --shadow-xl: rgba(0, 0, 0, 0.16) 0px 2px 2px 0px, rgba(255, 255, 255, 0.04) 1px 1.5px 3px 0px inset, rgba(255, 255, 255, 0.04) -1px 1.25px 3px 0px inset, rgba(255, 56, 92, 0.3) 0px -1px 3px 0px inset, rgba(0, 0, 0, 0.16) 0px -1px 2px 0px inset;
  --breakpoint-bp1: 743px;
  --breakpoint-bp2: 744px;
  --breakpoint-bp3: 950px;
  --breakpoint-bp4: 1128px;
  --breakpoint-bp5: 1440px;
}
​
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.