taste-skill / Components / Tailwind CSS Buttons

Tailwind CSS Button Styles

5 distinct Tailwind CSS button styles extracted from tailwindcss.com — heights, padding, 16px/9999px/8px radius, colors — with copy-paste CSS and Tailwind classes.

Source: computed styles extracted from https://tailwindcss.com on 2026-10-26 by the taste-skill extractor. Brand fonts may be proprietary; previews fall back to Inter / system fonts. Tailwind CSS is a trademark of its owner; this page documents publicly visible styling for reference and is not affiliated with Tailwind CSS.

Rendered on the Tailwind CSS canvas

v4.3 ⌘K Quick search ⌘K Check availability index.html

Button specs

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`
Check availability	40px	`8px 12px`	`8px`	`#F6339A` `#FFFFFF`	`none`	`14px / 700`
index.html	28px	`4px 8px`	`4px`	`rgba(255, 255, 255, 0.1)` `#FFFFFF`	`none`	`12px / 400`

Copy-paste code

Button 1 — v4.3

<!-- Tailwind CSS button 1: "v4.3" -->
<a class="inline-flex items-center justify-center h-[24px] py-[2px] px-[6px] rounded-[16px] bg-[rgba(0,0,20,0.05)] text-[#030712] text-[12px] font-[500]">v4.3</a>

/* plain CSS */
.btn-tailwindcss-1 { height:24px; padding:2px 6px; border-radius:16px; background:rgba(0, 0, 20, 0.05); color:#030712; border:0; font-size:12px; font-weight:500; }

Button 2 — ⌘K

<!-- Tailwind CSS button 2: "⌘K" -->
<a class="inline-flex items-center justify-center h-[24px] py-[4px] px-[8px] rounded-[9999px] bg-[rgba(0,0,0,0.02)] text-[#000000] text-[16px] font-[400] shadow-[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]">⌘K</a>

/* plain CSS */
.btn-tailwindcss-2 { height:24px; padding:4px 8px; border-radius:9999px; background:rgba(0, 0, 0, 0.02); color:#000000; border:0; font-size:16px; font-weight:400; box-shadow: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; }

Button 3 — Quick search ⌘K

<!-- Tailwind CSS button 3: "Quick search ⌘K" -->
<a class="inline-flex items-center justify-center h-[40px] py-[8px] px-[16px] rounded-[9999px] text-[rgba(4,8,18,0.5)] text-[14px] font-[400] shadow-[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]">Quick search ⌘K</a>

/* plain CSS */
.btn-tailwindcss-3 { height:40px; padding:8px 16px; border-radius:9999px; background:transparent; color:rgba(4, 8, 18, 0.5); border:0; font-size:14px; font-weight:400; box-shadow: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; }

Button 4 — Check availability

<!-- Tailwind CSS button 4: "Check availability" -->
<a class="inline-flex items-center justify-center h-[40px] py-[8px] px-[12px] rounded-[8px] bg-[#F6339A] text-[#FFFFFF] text-[14px] font-[700]">Check availability</a>

/* plain CSS */
.btn-tailwindcss-4 { height:40px; padding:8px 12px; border-radius:8px; background:#F6339A; color:#FFFFFF; border:0; font-size:14px; font-weight:700; }

Button 5 — index.html

<!-- Tailwind CSS button 5: "index.html" -->
<a class="inline-flex items-center justify-center h-[28px] py-[4px] px-[8px] rounded-[4px] bg-[rgba(255,255,255,0.1)] text-[#FFFFFF] text-[12px] font-[400] shadow-[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]">index.html</a>

/* plain CSS */
.btn-tailwindcss-5 { height:28px; padding:4px 8px; border-radius:4px; background:rgba(255, 255, 255, 0.1); color:#FFFFFF; border:0; font-size:12px; font-weight:400; box-shadow: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; }

Transition seen on these buttons: ease

More Tailwind CSS

Tailwind CSS full token spec Tailwind CSS style guide Tailwind CSS Cards Tailwind CSS Pricing Table Tailwind CSS vs shadcn/ui

Same component, other brands

Linear Buttons Stripe Buttons Resend Buttons Vercel Buttons Supabase Buttons Raycast Buttons Cursor Buttons Mintlify Buttons Dub Buttons Trigger.dev Buttons PlanetScale Buttons Neon Buttons

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

See taste-skill Pro →