Stylepack

Alat

Tema Tailwind dari situs web mana pun

Masukkan alamat situs web dan dapatkan blok @theme Tailwind v4 dengan warna, font family, radius, bayangan, dan breakpoint-nya, siap ditempel ke CSS Anda.

Cobastripe.comlinear.appairbnb.com

airbnb.com

Diukur 4 hari yang lalu.

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;
}
​
Buka halaman jawaban lengkapBuka paket desain

Cara kerjanya

Stylepack membuka situs di browser sungguhan, mengukur apa yang tampil (bukan apa yang tertulis di stylesheet) pada empat lebar layar dan di kedua tema, lalu menyimpan hasilnya sebagai paket desain. Situs yang sudah diukur langsung terjawab; situs baru butuh kurang dari semenit. Setiap nilai di halaman ini berasal dari paket itu.

Pertanyaan

Ini Tailwind v3 atau v4?

Tailwind v4: blok @theme di CSS. Untuk v3, nilai yang sama tersedia sebagai variabel CSS dan JSON di alat palet warna dan di tokens.json paket desainnya.

Apa isi temanya?

Warna yang dinamai menurut peran, font family beserta pengganti gratisnya, skala radius, bayangan, dan breakpoint tempat situs mengubah tata letaknya, semuanya diukur dari halaman aslinya.

Bagaimana agar tetap sinkron dengan situsnya?

Buka halaman paket situs itu kapan saja: Stylepack mengukur ulang situs yang terindeks secara berkala dan paketnya memuat tanggal pengukuran.