tailwind-4

Codify safe Tailwind patterns and anti-patterns for React and Vue projects.

Updated Aug 27, 2026

Search Tags:#css #tailwind #frontend-patterns #cn #conditional-classes #var-in-class #hex-colors

Ready to run

npx skills add https://github.com/stephanofer/finance-trackerv2 --skill tailwind-4-stephanofer

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: tailwind-4
Source: https://github.com/stephanofer/finance-trackerv2/tree/main/.opencode/skill/tailwind-4
Command: npx skills add https://github.com/stephanofer/finance-trackerv2 --skill tailwind-4-stephanofer

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Tailwind-4 patterns and best practices help teams style consistently, avoid common pitfalls, and maintain scalable UI codebases.

Core Features & Use Cases

Enforce using semantic Tailwind classes over ad-hoc CSS tricks.
Prevent problematic patterns like var() in className and hex colors.
Promote the cn() utility to compose conditional classes.
Provide guidelines for dynamic styling with style props when needed.

Quick Start

Use the Tailwind-4 guidelines to implement a small component: apply cn('p-4', isActive && 'bg-blue-500') and ensure className uses semantic Tailwind tokens instead of var() or hex colors.

Frequently Asked Questions about tailwind-4

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I use conditional Tailwind classes in React without causing style conflicts?▼

Use the cn() utility to compose conditional Tailwind classes, applying patterns like cn('p-4', isActive && 'bg-blue-500') to safely merge strings and manage dynamic styling without conflicts.

Why should I avoid using var() inside the className attribute with Tailwind?▼

Avoid using var() in className because it bypasses Tailwind's utility-first system. Use semantic Tailwind tokens instead to maintain a scalable UI codebase and ensure consistent styling.

How do I handle dynamic styling in Tailwind when utility classes are not enough?▼

Apply the style props approach for dynamic styling when needed. This provides a safe escape hatch for values that cannot be represented by semantic Tailwind utility classes.

Does the Tailwind 4 Skill support frontend frameworks other than React?▼

Yes, the Tailwind 4 patterns apply to frontend projects using Tailwind with React, Vue, or similar frameworks, enforcing semantic utility classes across different environments.

What is the best way to enforce consistent Tailwind colors across a UI codebase?▼

The best way to enforce consistent Tailwind colors is to strictly avoid hex colors in your classes. Use semantic Tailwind color tokens to ensure scalable and maintainable styling.