Araçlar
Herhangi bir web sitesinden Tailwind teması
Bir web sitesi adresi girin ve renkleri, font aileleri, köşe yarıçapları, gölgeleri ve kırılma noktalarıyla bir Tailwind v4 @theme bloğu alın, CSS dosyanıza yapıştırmaya hazır.
airbnb.com
4 gün önce ölçüldü.
/* 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;
}
Nasıl çalışır
Stylepack siteyi gerçek bir tarayıcıda açar, dört genişlikte ve iki temada ekranda ne render edildiğini ölçer (stil dosyasının ne dediğini değil) ve sonucu bir tasarım paketi olarak saklar. Daha önce ölçülmüş bir site anında cevap verir; yeni bir site bir dakikadan kısa sürer. Bu sayfadaki her değer o paketten gelir.
Sorular
Bu Tailwind v3 mü, v4 mü?
Tailwind v4: CSS içinde bir @theme bloğu. v3 için aynı değerler renk paleti aracında CSS değişkenleri ve JSON olarak, tasarım paketinde ise tokens.json içinde mevcut.
Temanın içinde ne var?
Rolüne göre adlandırılmış renkler, ücretsiz muadilleriyle font aileleri, köşe yarıçapı ölçeği, gölgeler ve sitenin yerleşimini değiştirdiği kırılma noktaları; hepsi canlı sayfadan ölçülmüş.
Siteyle nasıl güncel tutarım?
Sitenin paket sayfasını istediğiniz zaman açın: Stylepack dizinlenmiş siteleri düzenli aralıklarla yeniden ölçer ve paket, ölçüm tarihini taşır.