How to build a UI in the Tailwind CSS style

:root {
  /* Tailwind CSS style — extracted from tailwindcss.com by taste-skill */
  --canvas: #FFFFFF;
  --surface: #F8FAFC;
  --text: #030712;
  --text-muted: #4A5565;
  --accent: #0EA5E9;
  --border: rgba(0, 0, 20, 0.05);
  --font-heading: Inter, Inter, system-ui, -apple-system, sans-serif;
  --font-body: Inter, Inter, system-ui, -apple-system, sans-serif;
  --font-mono: 'IBM Plex Mono (plexMono)', 'JetBrains Mono', ui-monospace, monospace;
  --h1-size: 96px;
  --h1-tracking: -0.05em;
  --h1-weight: 400;
  --radius-button: 16px;
  --radius-common: 8px;
  --shadow-common: 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;
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --duration: 0.15s;
}

// tailwind.config.js — Tailwind CSS style tokens (taste-skill)
module.exports = {
  theme: {
    extend: {
      colors: {
        canvas: "#FFFFFF",
        surface: "#F8FAFC",
        ink: "#030712",
        muted: "#4A5565",
        accent: "#0EA5E9",
        line: "rgba(0, 0, 20, 0.05)",
      },
      fontFamily: {
        heading: ["Inter", 'Inter', 'system-ui', 'sans-serif'],
        sans: ["Inter", 'Inter', 'system-ui', 'sans-serif'],
        mono: ["IBM Plex Mono (plexMono)", 'ui-monospace', 'monospace'],
      },
      fontSize: { display: ["96px", { letterSpacing: "-0.05em", fontWeight: "400" }] },
      borderRadius: { button: "16px", card: "8px" },
      boxShadow: { brand: "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" },
      transitionTimingFunction: { brand: "cubic-bezier(0.4, 0, 0.2, 1)" },
    },
  },
};

---
name: tailwindcss-style
description: Build UI in the Tailwind CSS visual style (Engineered CSS Grid Lines & Technical Blueprint Precision). Use when the user asks for a Tailwind CSS-like look.
---

# Tailwind CSS Style — Quick Rules (source: tailwindcss.com, extracted by taste-skill)

## Tokens
- canvasBg: #FFFFFF — Primary Tailwind CSS page canvas
- surfaceElevated: #F8FAFC — Primary elevated card & bento surface
- surfaceSecondary: rgba(0, 0, 0, 0.02) — Secondary interactive container / hover fill
- borderPrimary: rgba(0, 0, 20, 0.05) — Primary structural divider (1px rgba(0,0,20,0.05))
- borderSecondary: rgba(0, 0, 20, 0.05) — Secondary nested module or pill border
- textPrimary: #030712 — Hero H1, section H2 & high-contrast foreground
- textMuted: #4A5565 — Lead paragraphs, descriptions & muted labels
- accentPrimary: #0EA5E9 — Primary interactive CTA & brand highlight (16px / 9999px)
- accentSecondary: rgba(255, 255, 255, 0.1) — Secondary badge, syntax or telemetry highlight

## Typography
- Heading font: Inter; body: Inter; mono: IBM Plex Mono (plexMono)
- Hero H1: 96px | line-height 96px (leading-[1]) | letter-spacing -4.8px (tracking-[-0.05em]) | weight 400 (font-[400]) | color #030712 (text-[#030712]) | font inter
- Section H2 (Primary): 40px | line-height 40px (leading-[1]) | letter-spacing -2px (tracking-[-0.05em]) | weight 500 (font-[500]) | color #030712 (text-[#030712]) | font inter
- Card / Feature H3: 36px | line-height 48px (leading-[1.33]) | letter-spacing 0px (tracking-[0em]) | weight 600 (font-[600]) | color #030712 (text-[#030712]) | font inter
- Body Copy (Paragraph): 18px | line-height 28px (leading-[1.56]) | letter-spacing 0px (tracking-[0em]) | weight 500 (font-[500]) | color #4A5565 (text-[#4A5565]) | font inter

## Components
- Primary button: height 24px, padding 2px 6px, radius 16px, bg rgba(0, 0, 20, 0.05), text #030712, 12px / 500
- Card: bg rgba(255, 255, 255, 0.1), border none, radius 8px, padding 12px 12px

## 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)).
- NEVER deviate from the signature button geometry (16px / 9999px) or introduce off-brand saturated gradients.
- NEVER use default browser monospace when rendering code or telemetry—always pair with IBM Plex Mono (plexMono).

Full 120-line spec: https://taste-skill.pages.dev/taste/tailwindcss/

npx taste-skill add tailwindcss