refactor: modernize docs-app with Tailwind CSS v4 and Shiki

[hdcodedev]

Summary

• Migrate CSS design system from custom properties to Tailwind CSS v4 with oklch color tokens, reducing stylesheet size by ~950 lines
• Replace react-syntax-highlighter with Shiki for higher-fidelity syntax highlighting
• Switch markdown rendering from @mdx-js to react-markdown with remark-gfm
• Add clsx and tailwind-merge utilities for composable className handling
• Refactor components (Sidebar, Header, MarkdownRenderer, AgentPromptBuilder, VersionSwitcher) to use new utility patterns and Tailwind classes
• Add new utility modules: copy-to-clipboard.ts, utils.ts
• Add PostCSS config and privacy policy layout

Changes

• 50 files changed: 2,817 insertions, 3,658 deletions
• Net reduction of ~841 lines of code
• Lint passes cleanly (warnings only)

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
charts	Ready	Preview, Comment	Mar 28, 2026 11:40am

[hdcodedev]

Related Issues

This PR addresses the following issues:

• Closes Migrate to Tailwind CSS #25 — Migrates docs-app to Tailwind CSS v4 with PostCSS config, @tailwindcss/postcss, and utility-class-based styling across all components.
• Partially addresses Design: Redefine docs color tokens and remove generic purple/cyan gradients #34 — Introduces oklch-based color token system in globals.css replacing the old hex-based palette. Accent colors (indigo/cyan) remain but are now defined through a deliberate token system with semantic mappings (success, error, info, warning).
• Partially addresses Refactor: Replace inline styles with tokenized CSS classes across docs UI #39 — Removes inline style={} objects from not-found.tsx, thanks/layout.tsx, privacy-policy/page.tsx, and other components, replacing them with Tailwind utility classes.
• Partially addresses Design: Replace generic docs typography with a distinctive font system #33 — Replaces Inter/Roboto with IBM Plex Sans + IBM Plex Mono as the font system, loaded via next/font and mapped through CSS theme tokens (--font-sans, --font-display, --font-mono).