Stylepack

الأدوات

سمة Tailwind من أي موقع

أدخل عنوان موقع واحصل على كتلة @theme لـ Tailwind v4 بألوانه وعائلات خطوطه واستداراته وظلاله ونقاط التوقف فيه، جاهزة للصق في 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 الموقع في متصفح حقيقي، ويقيس ما يُعرض فعلًا (لا ما يقوله ملف الأنماط) بأربعة عروض وفي كلا الوضعين، ويحفظ النتيجة كحزمة تصميم. الموقع المقاس سابقًا يجيب فورًا؛ والجديد يستغرق أقل من دقيقة. كل قيمة في هذه الصفحة تأتي من تلك الحزمة.

أسئلة

هل هذا Tailwind v3 أم v4؟

Tailwind v4: كتلة @theme في CSS. أما لـ v3 فالقيم نفسها متاحة كمتغيرات CSS وJSON في أداة لوحة الألوان وفي ملف tokens.json داخل حزمة التصميم.

ماذا تحتوي السمة؟

الألوان مسماة حسب الدور، وعائلات الخطوط مع بدائلها المجانية، وسلّم الاستدارات، والظلال، ونقاط التوقف التي يغيّر الموقع تخطيطه عندها، كلها مقاسة من الصفحة الحية.

كيف أبقيها متزامنة مع الموقع؟

افتح صفحة حزمة الموقع في أي وقت: يعيد Stylepack قياس المواقع المفهرسة دوريًا، وتحمل الحزمة تاريخ القياس.