taste-skill / Compare styles / Tailwind CSS vs shadcn/ui

Tailwind CSS vs shadcn/ui: design style comparison

Tailwind CSS is Engineered CSS Grid Lines & Technical Blueprint Precision; shadcn/ui is Zinc Monochrome Component Primitives & Zero-Distraction Craft. Both were extracted with the same taste-skill pipeline, so every value below is directly comparable. 14 of 18 tracked tokens differ.

Side-by-side preview

Tailwind CSS style · light

Ship the product, not the pixels.

Preview text rendered with the extracted Tailwind CSS canvas, text, muted and accent tokens.

v4.3 ⌘K

Card on extracted card recipe

Accent link: #0EA5E9 · border rgba(0, 0, 20, 0.05)

shadcn/ui style · light

Ship the product, not the pixels.

Preview text rendered with the extracted shadcn/ui canvas, text, muted and accent tokens.

Button Button

Card on extracted card recipe

Accent link: #171717 · border #E5E5E5

Key differences

Both are light-mode designs, but the canvases differ: #FFFFFF vs #FFFFFF.
Accent: #0EA5E9 (Tailwind CSS) vs #171717 (shadcn/ui).
Headings: Inter vs Geist.
Display type: Tailwind CSS H1 is 96px / -0.05em (w400); shadcn/ui H1 is 48px / -0.05em (w600) — Tailwind CSS sets 48px larger headlines.
Primary button radius: 16px vs 10px; height 24px vs 32px.
Depth: Tailwind CSS uses 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 most; shadcn/ui uses 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.145 -0.00000143796 0.00000340492 / 0.05) 0px 0px 0px 1px, rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.1) 0px 1px 2px -1px most.

Token table

Token	Tailwind CSS	shadcn/ui
Canvas same	`#FFFFFF`	`#FFFFFF`
Surface	`#F8FAFC`	`#F5F5F5`
Text	`#030712`	`#0A0A0A`
Muted text	`#4A5565`	`#737373`
Accent	`#0EA5E9`	`#171717`
Border	`rgba(0, 0, 20, 0.05)`	`#E5E5E5`
Heading font	`Inter`	`Geist`
Body font	`Inter`	`Geist`
Mono font	`IBM Plex Mono (plexMono)`	`Geist Mono`
H1	`96px / -0.05em (w400)`	`48px / -0.05em (w600)`
Button radius	`16px`	`10px`
Button height	`24px`	`32px`
Most-used radius	`8px`	`18px`
Most-used shadow	`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`	`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.145 -0.00000143796 0.00000340492 / 0.05) 0px 0px 0px 1px, rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.1) 0px 1px 2px -1px`
Easing same	`cubic-bezier(0.4, 0, 0.2, 1)`	`cubic-bezier(0.4, 0, 0.2, 1)`
Duration same	`0.15s`	`0.15s`
Container max-width	`768px`	`896px`
Mode same	`light`	`light`

Primary buttons

Rendered	Height	Padding	Radius	Background / Text	Border	Font
v4.3	24px	`2px 6px`	`16px`	`rgba(0, 0, 20, 0.05)` `#030712`	`none`	`12px / 500`
⌘K	24px	`4px 8px`	`9999px`	`rgba(0, 0, 0, 0.02)` `#000000`	`none`	`16px / 400`
Quick search ⌘K	40px	`8px 16px`	`9999px`	`transparent` `rgba(4, 8, 18, 0.5)`	`none`	`14px / 400`

Rendered	Height	Padding	Radius	Background / Text	Border	Font
Button	32px	`8px 16px`	`10px`	`#F5F5F5` `#000000`	`none`	`14px / 500`
Button	32px	`0px 10px`	`18px`	`#171717` `#FAFAFA`	`none`	`14px / 500`
Secondary	32px	`0px 12px`	`18px`	`#F5F5F5` `#171717`	`none`	`14px / 500`

Which style should you pick?

Pick Tailwind CSS if you want Daylight #FFFFFF canvas overlaid with exposed 1px rgba(0,0,20,0.05) blueprint construction lines, monumental 96px Inter headlines (-0.05em), PlexMono utility classes, and #38BDF8 / #F6339A accents — signals: css, design-system, grid-lines, blueprint, devtools, plex-mono, precision.

Pick shadcn/ui if you want Pure #FFFFFF / #F5F5F5 zinc monochrome palette with 1px #E5E5E5 borders, 48px Geist display typography (-0.05em tracking), 10px radius primitives, and strict #171717 / #737373 hierarchy — signals: components, ui-kit, radix, shadcn, monochrome, zinc, geist, minimal.

Shared traits: light, tailwind.

Rules that differ

Tailwind CSS never:

NEVER substitute generic uncalibrated gray backgrounds for Tailwind CSS’s exact #FFFFFF canvas and #F8FAFC surface pairing.
NEVER replace Inter display typography or ignore its signature scale (96px / -0.05em (w400)).
NEVER use thick opaque borders that clash with rgba(0, 0, 20, 0.05) (1px rgba(0,0,20,0.05)).

shadcn/ui never:

NEVER substitute generic uncalibrated gray backgrounds for shadcn/ui’s exact #FFFFFF canvas and #F5F5F5 surface pairing.
NEVER replace Geist display typography or ignore its signature scale (48px / -0.05em (w600)).
NEVER use thick opaque borders that clash with #E5E5E5 (1px solid #E5E5E5).

Go deeper

Tailwind CSS style guide shadcn/ui style guide Tailwind CSS token spec shadcn/ui token spec

Values extracted from https://tailwindcss.com and https://ui.shadcn.com. Not affiliated with either company.

Get all 30 full SKILL.md specs (Cursor / Claude Code / Codex ready) plus the Pro growth skills.

See taste-skill Pro →