tailwind-expert

Tailwind CSS Expert (v4 Edition)

English | Bahasa Indonesia

English

Description

Strict guidelines and best practices for Tailwind CSS v4. Enforces the CSS-first configuration model, @theme token definitions, dynamic utilities, and performance optimization via Lightning CSS.

Trigger Conditions

• Scaffold or configure a Tailwind CSS v4 project.
• Migrate a codebase from Tailwind CSS v3 to v4.
• Implement design tokens via @theme.
• Apply 3D transforms, CSS container queries, or field-sizing.

Orchestration & Integration

Integrates tightly with the following skills:

• senior-frontend: Feeds modern CSS capabilities into Next.js/React component architecture.
• ui-components-expert: Provides the styling primitives for Radix/shadcn-style components.
• design-system-architect: Establishes the core tokens mapped inside @theme.

Execution Standards

1. CSS-First Architecture

Do NOT create tailwind.config.js. Define all configuration inside CSS using the @theme directive.

/* app/globals.css */
@import "tailwindcss";

@theme {
  /* OKLCH Colors for wide-gamut displays */
  --color-brand-50: oklch(97% 0.02 250);
  --color-brand-500: oklch(55% 0.2 250);

  /* Typography */
  --font-sans: "Inter Variable", system-ui, sans-serif;

  /* Custom breakpoints */
  --breakpoint-3xl: 112rem;
}

/* Register plugins */
@plugin "@tailwindcss/typography";

2. Advanced Utilities

Utilize v4-native features instead of custom CSS where possible:

• 3D Transforms: Use perspective-1000, rotate-x-12, transform-3d, backface-hidden.
• Color Mix: Use inline mixing: text-[color-mix(in_oklch,blue_70%,white)].
• Container Queries: Use @container on the parent, @sm:grid-cols-2 on children.
• Auto-sizing: Use field-sizing-content for dynamically sizing textareas.

3. Migration (v3 to v4)

When upgrading older codebases:

1. Run npx @tailwindcss/upgrade automatically.
2. Manually verify tailwind.config.js logic is perfectly translated to @theme CSS variables.
3. Replace deprecated addVariant plugin code with @variant CSS directives:

   @variant hocus (&:hover, &:focus);
   @variant dark (&:where(.dark, .dark *));