Stylepack

टूल

किसी भी वेबसाइट से Tailwind थीम

वेबसाइट का पता डालें और उसके रंगों, फ़ॉन्ट फ़ैमिली, radius, shadows और breakpoints के साथ Tailwind v4 @theme ब्लॉक पाएँ, अपनी CSS में पेस्ट करने के लिए तैयार।

आज़माएँstripe.comlinear.appairbnb.com

stripe.com

4 दिन पहले मापा गया।

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;
}
​
पूरा जवाब वाला पेज खोलेंडिज़ाइन पैक खोलें

यह कैसे काम करता है

Stylepack साइट को असली ब्राउज़र में खोलता है, चार चौड़ाइयों पर और दोनों थीम में वह मापता है जो रेंडर होता है (न कि जो stylesheet कहती है), और नतीजे को डिज़ाइन पैक के रूप में रखता है। पहले से मापी गई साइट तुरंत जवाब देती है; नई साइट में एक मिनट से कम लगता है। इस पेज का हर मान उसी पैक से आता है।

सवाल

यह Tailwind v3 है या v4?

Tailwind v4: CSS में एक @theme ब्लॉक। v3 के लिए वही मान कलर पैलेट टूल पर CSS variables और JSON के रूप में, और डिज़ाइन पैक की tokens.json में मिलते हैं।

थीम में क्या है?

भूमिका के नाम वाले रंग, फ़ॉन्ट फ़ैमिली अपने मुफ़्त स्टैंड-इन के साथ, radius scale, shadows और वे breakpoints जिन पर साइट अपना लेआउट बदलती है, सब लाइव पेज से मापे गए।

इसे साइट के साथ अपडेट कैसे रखूँ?

साइट का पैक पेज कभी भी खोलें: Stylepack इंडेक्स की गई साइटों को समय-समय पर फिर से मापता है और पैक में मापने की तारीख़ दी होती है।