Stylepack

टूल

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

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

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

linear.app

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

background#08090asurface#101112surface-2#1c1d1esurface-3#07220aforeground#f7f8f8muted-foreground#8a8f98primary#e5e5e6on-primary#111111
tailwind.css
/* Tailwind v4 theme extracted from https://linear.app/ */
@import "tailwindcss";
​
@theme {
  --color-background: #08090a;
  --color-surface: #101112;
  --color-surface-2: #1c1d1e;
  --color-surface-3: #07220a;
  --color-foreground: #f7f8f8;
  --color-muted-foreground: #8a8f98;
  --color-primary: #e5e5e6;
  --color-on-primary: #111111;
  --color-secondary: #5e6ad2;
  --color-border: #1c1d1e;
  --font-sans: "Inter Variable", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
  --font-display: "Inter Variable", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
  --font-mono: "Berkeley Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --radius-none: 0px;
  --radius-full: 9999px;
  --radius-lg: 12px;
  --radius-sm: 4px;
  --shadow-sm: rgba(0, 0, 0, 0.2) 0px 0px 0px 1px;
  --shadow-md: rgba(0, 0, 0, 0.2) 0px 0px 12px 0px inset;
  --shadow-lg: rgba(0, 0, 0, 0.25) 0px 2px 32px 0px;
  --shadow-xl: rgba(255, 255, 255, 0.05) 0px 0px 0px 1px inset;
  --breakpoint-bp1: 640px;
  --breakpoint-bp2: 768px;
  --breakpoint-bp3: 928px;
  --breakpoint-bp4: 1024px;
  --breakpoint-bp5: 1280px;
  --container-content: 1344px;
}
​
पूरा जवाब वाला पेज खोलेंडिज़ाइन पैक खोलें

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

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

सवाल

यह Tailwind v3 है या v4?

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

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

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

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

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