Tailwind CSS brand system audit
Tailwind CSS runs a pill geometry on a neutral white canvas, set in Inter. 7 of 9 contrast pairings pass WCAG 2.1 AA and the homepage scores 85/100 for technical SEO.
3 dimensions
- Brand consistency
- 94
- WCAG 2.1 contrast
- 78
- SEO readiness
- 85
01Brand palette
consistency 94/10002Typography
Body copy set in the brand’s text face, at reading size and comfortable measure.
- Headings
- Inter
- Google Fonts
- Body
- Inter
- Google Fonts
- Mono / data
- IBM Plex Mono
- Google Fonts
03UI vibe & geometry
- Radius style
- Pill · 16 px+
- Controls
- pill (9999px)
- Cards
- 16px
- Surface
- Neutral white · #FFFFFF / #FFFFFF / #E2E8F0
04WCAG 2.1 contrast
7/9 AA · 4/9 AAA| Pairing | Colors | Ratio | AA | AAA |
|---|---|---|---|---|
| AaBody text on surface | #030712 / #FFFFFF | 20.13:1 | Pass | Pass |
| AaSecondary text on surface | #64748B / #FFFFFF | 4.76:1 | Pass | Fail |
| AaPrimary as link/text on surface | #0EA5E9 / #FFFFFF | 2.77:1 | Fail | Fail |
| AaButton label on primary | #111113 / #0EA5E9 | 6.81:1 | Pass | Fail |
| AaAccent on surface | #38BDF8 / #FFFFFF | 2.14:1 | Fail | Fail |
| AaSecondary on surface | #0F172A / #FFFFFF | 17.85:1 | Pass | Pass |
| AaWhite on secondary | #FFFFFF / #0F172A | 17.85:1 | Pass | Pass |
| AaDark mode: text on canvas | #F5F5F7 / #0A0F14 | 17.67:1 | Pass | Pass |
| AaDark mode: primary on canvas | #0EA5E9 / #0A0F14 | 6.94:1 | Pass | Fail |
05SEO readiness
10 of 14 checks pass- warnTitle tag76 chars: “Tailwind CSS - Rapidly build modern websites without ever leaving your”
- passMeta description114 chars
- passSingle H1 heading1 H1 element(s)
- warnCanonical URLNo rel=canonical
- passHTML lang attributelang="en"
- passMobile viewportwidth=device-width, initial-scale=1
- passOpen Graph tags3/3 of og:title, og:description, og:image
- passTwitter / X cardsummary_large_image
- warnStructured data (JSON-LD)No JSON-LD found
- passHTTPSServed over HTTPS
- passIndexable (robots meta)No robots restrictions
- warnXML sitemapNo sitemap discovered
- passFavicon / touch iconIcon link present
- passImage alt text95% of 40 images
tailwindcss.com brand audit FAQ
What are Tailwind CSS's brand colors?
Tailwind CSS uses #0EA5E9 as its primary color, #0F172A as secondary and #38BDF8 as accent, on a #FFFFFF surface with #030712 text (snapshot from 10 Nov 2026).
Which fonts does tailwindcss.com use?
Headings and body text are set in Inter. Proprietary faces are paired with the closest free Google Fonts family for documents and previews.
Does tailwindcss.com pass WCAG contrast checks?
7 of 9 key color pairings pass WCAG 2.1 AA and 4 pass AAA. The full PDF report suggests a passing replacement color for every pairing that fails.
What is tailwindcss.com's technical SEO score?
The homepage scores 85/100 across 14 technical SEO checks, with 10 passing: title, meta description, H1, canonical, Open Graph, structured data, sitemap, HTTPS and image alt text among them.
How was this Tailwind CSS audit made?
SuiteAnvil StyleExtract read the public homepage of tailwindcss.com, its CSS, logo, metadata and sitemap. Run the same audit on any URL for free and export the PDF report or Tailwind v4 tokens.
Take this audit further.
The full report adds prioritized findings, the tonal scale, dark-mode tokens and a developer appendix with Tailwind v4, CSS variables, .cursorrules and DESIGN.md.
Embed on your site (free)Link the Tailwind CSS press kit or show the live brand score badge.
A plain text link to the hosted press & brand kit, e.g. in your site footer or press page.
<a href="https://suiteanvil.com/kit/tailwindcss.com">Press & Brand Kit</a>
The badge links to the audit and updates after each rescan. Score: mean of brand consistency and the share of WCAG 2.1 AA color pairings.
<a href="https://suiteanvil.com/audit/tailwindcss.com"><img src="https://suiteanvil.com/api/badge/tailwindcss.com.svg" alt="Brand and WCAG score for tailwindcss.com by SuiteAnvil" height="20"></a>[](https://suiteanvil.com/audit/tailwindcss.com)Snapshot of tailwindcss.com’s public website from 10 Nov 2026, produced by SuiteAnvil StyleExtract. Values change as the site evolves. Tailwind CSS and its marks belong to their owner; SuiteAnvil is not affiliated with or endorsed by Tailwind CSS.
SuiteAnvil extracts publicly visible design tokens, logos, and font references for workflow automation. You are responsible for ensuring you hold valid commercial rights or client authorization for any proprietary fonts, trademarks, and brand assets before commercial publication. Licensing notice