{"meta":{"url":"https://tailwindcss.com/","domain":"tailwindcss.com","extractedAt":"2026-04-26T13:10:37.249Z","schemaVersion":"v1","durationMs":17483,"extractionDepth":1,"qualityScore":90},"identity":{"brandName":"Tailwind CSS","description":"Tailwind CSS is a utility-first CSS framework for rapidly building modern websites without ever leaving your HTML.","archetypes":[{"name":"The Creator","confidence":0.9},{"name":"The Sage","confidence":0.7}]},"logos":[{"type":"primary","url":"https://img.loadlogo.com/tailwindcss.com","originalUrl":"https://img.loadlogo.com/tailwindcss.com","format":"svg","confidence":1,"source":"loadlogo"},{"type":"favicon","originalUrl":"/favicons/apple-touch-icon.png?v=4","url":"brands/tailwindcss.com/logo-0.png","format":"png","confidence":0.95,"dimensions":{"width":180,"height":180}},{"type":"favicon","originalUrl":"/favicons/favicon-32x32.png?v=4","url":"brands/tailwindcss.com/logo-1.png","format":"png","confidence":0.95,"dimensions":{"width":32,"height":32}},{"type":"favicon","originalUrl":"/favicons/favicon-16x16.png?v=4","url":"brands/tailwindcss.com/logo-2.png","format":"png","confidence":0.95,"dimensions":{"width":16,"height":16}},{"type":"favicon","originalUrl":"/favicons/favicon.ico?v=4","url":"brands/tailwindcss.com/logo-3.ico","format":"ico","confidence":0.95},{"type":"favicon","originalUrl":"/favicon.ico?favicon.32781b0b.ico","url":"brands/tailwindcss.com/logo-4.ico","format":"ico","confidence":0.95,"dimensions":{"width":48,"height":48}},{"type":"favicon","originalUrl":"https://tailwindcss.com/favicons/android-chrome-192x192.png?v=3","url":"brands/tailwindcss.com/logo-5.png","format":"png","confidence":0.95,"dimensions":{"width":192,"height":192}},{"type":"favicon","originalUrl":"https://tailwindcss.com/favicons/android-chrome-256x256.png?v=3","url":"brands/tailwindcss.com/logo-6.png","format":"png","confidence":0.95,"dimensions":{"width":256,"height":256}}],"colors":{"lightMode":{"primary":{"hex":"#000000","rgb":{"r":0,"g":0,"b":0},"name":"Black","role":"primary","source":"computed: button-sample-2 background-color","confidence":0.8},"background":{"hex":"#ffffff","rgb":{"r":255,"g":255,"b":255},"name":"White","role":"background","source":"manifest: background_color","confidence":0.95},"text":{"hex":"#000000","rgb":{"r":0,"g":0,"b":0},"name":"Black","role":"text","source":"computed: body color","confidence":0.75}},"rawPalette":[{"hex":"#000000","rgb":{"r":0,"g":0,"b":0},"source":"computed: button-sample-10","name":"Black"},{"hex":"#ffffff","rgb":{"r":255,"g":255,"b":255},"source":"manifest: background_color","name":"White"}]},"typography":{"families":[{"name":"inter","role":"body","source":"self-hosted","weights":[400,500,600,700],"fallbackStack":"inter Fallback, system-ui","confidence":0.95},{"name":"inter","role":"heading","source":"self-hosted","weights":[400,500,600],"fallbackStack":"inter Fallback, system-ui","confidence":0.95},{"name":"plexMono","role":"mono","source":"self-hosted","weights":[400],"fallbackStack":"plexMono Fallback, monospace","confidence":0.85}],"scale":{"body":{"fontFamily":"inter","fontSize":"16px","fontWeight":400,"lineHeight":"24px"},"h1":{"fontFamily":"inter","fontSize":"96px","fontWeight":400,"lineHeight":"96px","letterSpacing":"-4.8px"},"h2":{"fontFamily":"inter","fontSize":"40px","fontWeight":500,"lineHeight":"40px","letterSpacing":"-2px"},"h3":{"fontFamily":"inter","fontSize":"16px","fontWeight":600,"lineHeight":"24px"}},"conventions":{"headingCase":"sentence-case","bodyLineHeight":"24px","codeFont":"plexMono"}},"spacing":{"baseUnit":"2px","borderRadius":{"small":"4px","medium":"16px","large":"32px"}},"assets":[],"voice":{"toneSpectrum":{"formalCasual":4,"playfulSerious":7,"enthusiasticMatterOfFact":4,"respectfulIrreverent":6,"technicalAccessible":4},"copywritingStyle":{"avgSentenceLength":10,"vocabularyComplexity":"moderate","jargonUsage":"heavy","rhetoricalDevices":["repetition"],"ctaStyle":"action-oriented imperative verbs"},"contentPatterns":{"headingCase":"sentence-case","emojiUsage":"none","exclamationFrequency":"rare","questionUsageInHeadings":false,"bulletPreference":false},"sampleCopy":["Rapidly build modern websites without ever leaving your HTML.","A utility-first CSS framework packed with classes like flex, pt-4, text-center and rotate-90 that can be composed to build any design, directly in your markup.","Tailwind is unapologetically modern, and takes advantage of all the latest and greatest CSS features to make the developer experience as enjoyable as possible.","Ship faster and smaller.","Build whatever you want, without touching your CSS file."]},"rules":{"dos":["Maintain a stark, high-contrast monochrome color scheme using #000000 for primary text and #ffffff for backgrounds in light mode.","Use Inter font family for all body and heading text, specifically Inter 700 for prominent headings and Inter 400 for body copy, with a line-height of 24px for body text.","Apply sentence-case for all headings and titles, avoiding title case or all caps.","Utilize PlexMono font for all code snippets and technical references to clearly differentiate it from other text.","Implement multi-layer shadows, such as `rgba(0, 0, 0, 0) 0px 0px 0px 0px, oklab(0.129999 -0.00404751 -0.027702 / 0.1) 0px` for depth and visual separation on elements like cards or modals.","Incorporate subtle, repeating linear gradients like `repeating-linear-gradient(315deg, oklab(0 0 0 / 0.05) 0px, oklab(0 0 0 / 0.05) 1px)` for background textures or subtle visual interest, ensuring they remain understated.","Design primary action buttons with a solid #000000 background, #ffffff text, and a large border-radius of 32px, such as the 'Get started' button.","Use a base spacing unit of 2px for all padding, margins, and component sizing, ensuring consistent visual rhythm.","Employ action-oriented imperative verbs for all Call-to-Action (CTA) copy, keeping it direct and concise."],"donts":["Avoid using any emojis in marketing or technical copy; the brand maintains a professional and direct tone.","Do not use exclamations; the brand's voice is matter-of-fact and confident, not overly enthusiastic.","Refrain from using serif fonts; the brand's typography is exclusively sans-serif and monospace.","Do not introduce vibrant or extensive color palettes beyond the established monochrome, as the brand emphasizes clarity and focus.","Avoid flat, single-layer shadows; instead, use the detected multi-layer shadow styles for subtle depth.","Do not use small or sharp border radii (e.g., 0px or 4px) for primary action buttons; prefer large radii like 32px for a modern, approachable feel.","Do not deviate from the established sentence-case convention for headings; title case or all caps are not permitted.","Avoid verbose or overly formal language; maintain a moderate vocabulary with heavy, but clear, technical jargon where appropriate."],"source":"merged"},"vibe":{"summary":"Tailwind CSS exudes a modern, developer-centric vibe focused on efficiency and directness. It's a tool for creators who value speed and control, presenting itself as an indispensable, cutting-edge solution for web development.","tags":["developer-first","modern","efficient","utility-first","unapologetic","technical","streamlined"],"visualEnergy":6,"designEra":"contemporary-minimal","comparableBrands":["Vercel","Stripe","GitHub","Next.js"],"emotionalTone":"empowering-efficient","targetAudienceInferred":"Web developers, front-end engineers, and designers who are comfortable with code and seek highly customizable, performant, and modern development tools.","confidence":0.95},"officialGuidelines":{"discoveredUrl":"https://tailwindcss.com/brand","hasOfficialKit":true,"guidelineRules":["You may not use the Tailwind name or logos in any way that could mistakenly imply any official connection with or endorsement of Tailwind Labs Inc.","Any use of the Tailwind name or logos in a manner that could cause customer confusion is not permitted.","Do not name a product or service in a way that emphasizes the Tailwind brand, like \"Tailwind Themes\" or \"Tailwind Studio\".","Do not use the Tailwind name or logos in domain names like \"tailwindkits.com\".","You must use your own brand name in a way that clearly distinguishes it from Tailwind CSS.","Examples of permitted usage include \"ComponentStudio for Tailwind CSS\" or \"UtilityThemes: Templates for Tailwind CSS\".","You may not use our trademarks for t-shirts, stickers, or other merchandise without explicit written consent.","Assets should not be used in any way that could be confusing for customers or imply any affiliation with Tailwind Labs Inc."]},"buttons":{"styles":[{"variant":"ghost","borderRadius":"16px","padding":"2px 6px 2px 10px","fontSize":"12px","fontWeight":500,"sampleText":"v4.2","confidence":0.4},{"variant":"secondary","backgroundColor":"#000000","textColor":"#ffffff","borderRadius":"32px","borderColor":"#ffffff","padding":"8px 16px","fontSize":"14px","fontWeight":600,"sampleText":"Get started","confidence":0.5},{"variant":"outline","borderRadius":"0px","borderWidth":"0px 1px 0px 0px","padding":"24px","fontSize":"14px","fontWeight":400,"sampleText":"TemplatesVisually-stunning, easy to customize site templates built with React an","confidence":0.7}]},"effects":{"shadows":[{"value":"rgba(0, 0, 0, 0) 0px 0px 0px 0px, oklab(0.129999 -0.00404751 -0.027702 / 0.1) 0px 0px 0px 1px inset, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px","source":"[class*=\"tooltip\"]","context":"element"},{"value":"rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.1) 0px 20px 25px -5px, rgba(0, 0, 0, 0.1) 0px 8px 10px -6px","source":"[class*=\"shadow\"]","context":"element"},{"value":"rgba(0, 0, 0, 0) 0px 0px 0px 0px, oklab(0.999994 0.0000455678 0.0000200868 / 0.2) 0px 0px 0px 1px inset, rgba(0, 0, 0, 0) 0px 0px 0px 0px, oklab(0.129999 -0.00404751 -0.027702 / 0.1) 0px 0px 0px 1px, rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.1) 0px 1px 2px -1px","source":"[class*=\"shadow\"]","context":"element"},{"value":"rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.1) 0px 1px 2px -1px","source":"[class*=\"shadow\"]","context":"element"},{"value":"rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, oklab(0.745991 -0.0970495 -0.127188 / 0.5) 0px 10px 15px -3px, oklab(0.745991 -0.0970495 -0.127188 / 0.5) 0px 4px 6px -4px","source":"[class*=\"shadow\"]","context":"element"},{"value":"rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, oklab(0.713996 0.117875 -0.165232 / 0.5) 0px 10px 15px -3px, oklab(0.713996 0.117875 -0.165232 / 0.5) 0px 4px 6px -4px","source":"[class*=\"shadow\"]","context":"element"},{"value":"rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, oklab(0.718004 0.198758 -0.035884 / 0.5) 0px 10px 15px -3px, oklab(0.718004 0.198758 -0.035884 / 0.5) 0px 4px 6px -4px","source":"[class*=\"shadow\"]","context":"element"},{"value":"rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, oklab(0.672993 0.0219624 -0.180645 / 0.5) 0px 10px 15px -3px, oklab(0.672993 0.0219624 -0.180645 / 0.5) 0px 4px 6px -4px","source":"[class*=\"shadow\"]","context":"element"},{"value":"rgba(0, 0, 0, 0) 0px 0px 0px 0px, oklab(0.129999 -0.00404751 -0.027702 / 0.05) 0px 0px 0px 1px inset, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.25) 0px 25px 50px -12px","source":"[class*=\"shadow\"]","context":"element"},{"value":"rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.25) 0px 25px 50px -12px","source":"[class*=\"shadow\"]","context":"element"},{"value":"rgba(0, 0, 0, 0) 0px 0px 0px 0px, oklab(0.129999 -0.00404751 -0.027702 / 0.05) 0px 0px 0px 1px inset, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.05) 0px 2px 4px 0px inset","source":"[class*=\"shadow\"]","context":"element"},{"value":"rgba(0, 0, 0, 0) 0px 0px 0px 0px, oklab(0.129999 -0.00404751 -0.027702 / 0.08) 0px 0px 0px 1px inset, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px","source":"button-sample-1","context":"button"},{"value":"rgba(0, 0, 0, 0) 0px 0px 0px 0px, oklab(0.999994 0.0000455678 0.0000200868 / 0.05) 0px 0px 0px 1px inset, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px","source":"button-sample-7","context":"button"}],"gradients":[{"value":"repeating-linear-gradient(315deg, oklab(0 0 0 / 0.05) 0px, oklab(0 0 0 / 0.05) 1px, rgba(0, 0, 0, 0) 0px, rgba(0, 0, 0, 0) 50%)","source":"[class*=\"gradient\"]","context":"[class*=\"gradient\"]"},{"value":"radial-gradient(oklab(0.129999 -0.00404751 -0.027702 / 0.05) 1px, rgba(0, 0, 0, 0) 0px)","source":"[class*=\"gradient\"]","context":"[class*=\"gradient\"]"},{"value":"linear-gradient(rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 50%, lab(1.90334 0.278696 -5.48866) 100%)","source":"[class*=\"bg-\"]","context":"[class*=\"bg-\"]"},{"value":"linear-gradient(to right, lab(66.9756 -58.27 19.5419) 0%, lab(70.687 -23.6078 -45.9483) 100%)","source":"[class*=\"bg-\"]","context":"[class*=\"bg-\"]"},{"value":"linear-gradient(to right, lab(49.5493 79.8381 2.31768) 0%, lab(86.4156 6.13147 78.3961) 100%)","source":"[class*=\"bg-\"]","context":"[class*=\"bg-\"]"},{"value":"linear-gradient(to right, lab(43.0295 75.21 -86.5669) 0%, lab(76.6045 -40.9406 -29.6231) 100%)","source":"[class*=\"bg-\"]","context":"[class*=\"bg-\"]"}]},"designAssets":[{"src":"https://tailwindcss.com/_next/static/media/cover.f75d494c.png","width":384,"height":384,"format":"png","context":"body"},{"src":"https://tailwindcss.com/_next/static/media/responsive-1.369fbbd4.png","width":632,"height":421,"format":"png","context":"body"},{"src":"https://tailwindcss.com/_next/static/media/responsive-2.65169238.png","width":300,"height":300,"format":"png","context":"body"},{"src":"https://tailwindcss.com/_next/static/media/responsive-3.6b6101ca.png","width":300,"height":300,"format":"png","context":"body"},{"src":"https://tailwindcss.com/_next/static/media/responsive-4.8d79e2e9.png","width":300,"height":300,"format":"png","context":"body"},{"src":"https://tailwindcss.com/_next/static/media/responsive-5.b042c1a4.png","width":300,"height":300,"format":"png","context":"body"},{"src":"https://tailwindcss.com/_next/static/media/filters.09770f52.png","width":516,"height":516,"format":"png","context":"body"},{"src":"https://tailwindcss.com/_next/static/media/dark-mode.light.4b26783a.png","width":750,"height":1242,"format":"png","context":"body"},{"src":"https://tailwindcss.com/_next/static/media/dark-mode.dark.9634b3d8.png","width":750,"height":1242,"format":"png","context":"body"},{"src":"https://tailwindcss.com/_next/static/media/css-grid-1.8a3ab48a.png","width":384,"height":784,"format":"png","context":"body"}],"ogImage":"https://tailwindcss.com/opengraph-image.jpg?opengraph-image.c1dec83c.jpg","iconLibrary":{"name":"Heroicons","confidence":0.6,"sampleIcons":[],"source":"class-pattern"}}