tailwind
Tailwind CSS (v4+)
Overview
Tailwind CSS v4 skill covering CSS-first configuration, design tokens, component patterns, shadcn/ui integration, dark mode, container queries, migration from v3, and custom utilities.
When to use: Configuring Tailwind themes, building utility-first components, implementing dark mode, using container queries, migrating from v3, integrating shadcn/ui, troubleshooting build errors.
When NOT to use: Tailwind v3 legacy projects that will not upgrade, projects using a different styling approach (CSS Modules, styled-components) without plans to adopt Tailwind.
Quick Reference
| Pattern | API | Key Points |
|---|---|---|
| CSS-first config | @theme { --color-brand: oklch(...); } |
All config in CSS, no tailwind.config.js |
| Import entry | @import "tailwindcss"; |
Replaces @tailwind base/components/utilities |
| Custom utilities | @utility name { ... } |
Replaces @layer utilities, works with variants |
| Functional utilities | @utility tab-* { tab-size: --value(--tab-size-*); } |
Accept dynamic values via --value() |
| Plugin loading | @plugin "@tailwindcss/typography"; |
Replaces require() in config |
More from oakoss/agent-skills
playwright
|
199ui-ux-polish
Iterative UI/UX polishing workflow for web applications. Use when improving visual polish, refining desktop and mobile UX separately, running iterative enhancement cycles, applying design patterns like glassmorphism or bento grids, or auditing accessibility and WCAG compliance. Use for Stripe-level visual quality, responsive optimization, and design system alignment.
153find-skills
|
118knowledge-graph-builder
>
101pnpm-workspace
pnpm workspace monorepo management with filtering, catalogs, and shared configs. Use when setting up monorepos, managing workspace dependencies, filtering package commands, or sharing configuration across packages.
78content-humanizer
>
77