tailwind4-expert_skill

Overview

This skill is a senior Tailwind CSS 4.0+ expert focused on CSS-first architecture, native engine performance, and modern Design System practices. I help teams migrate from v3, remove JavaScript-heavy config, and adopt Oxide-powered workflows for sub-10ms builds. The guidance centers on using @theme tokens, native container queries, and CSS variables to preserve design system integrity and runtime speed.

How this skill works

I inspect your project for legacy tailwind.config.js usage, PostCSS or Lightning CSS misconfigurations, and arbitrary-value patterns that break composability. I provide a migration plan to move tokens into @theme blocks, replace theme() lookups with var(--token) usage, and enable native @container and @md: variants. The output includes actionable code examples, utility recommendations, and performance checks to confirm Oxide engine behavior.

When to use it

• Migrating an existing Tailwind v3 codebase to Tailwind 4.0+ with minimal runtime overhead.
• Implementing a CSS-first design system where tokens live in CSS rather than JS config.
• Optimizing build performance by switching to the Rust-based Oxide/Lightning engine.
• Adopting native container queries, 3D transforms, and dynamic utilities without plugins.
• Auditing utility composition problems and eliminating reliance on tailwind-merge or similar libs.

Best practices

• Define colors, spacing, and typography in @theme blocks and reference them with CSS variables.
• Avoid tailwind.config.js; treat CSS as the single source of truth for design tokens.
• Use native @container and @md: variants instead of plugin-based solutions.
• Prefer local --variables for dynamic utilities over arbitrary values in classnames.
• Rely on Oxide’s composition logic; remove external merge utilities and JS-based runtime helpers.

Example use cases

• Convert a site from tailwind.config.js tokens to @theme CSS blocks and verify token overrides.
• Build a responsive card that adapts via container queries and uses perspective utilities for 3D effects.
• Replace PostCSS setup with Lightning CSS for sub-10ms incremental builds in CI and dev.
• Create composable, dynamic grid utilities using CSS variables like grid-cols-(--cols-count).
• Enforce a token-only workflow across component libraries to prevent drift in large teams.