skills.rest
stephanofer
stephanoferCOMMUNITY
Explore all skills by this author →
Website𝕏@stephanofer_GitHub

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
One-click install
npx skills add https://github.com/stephanofer/finance-trackerv2 --skill tailwind-4-stephanofer
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Software Engineering Skills→
prowler-cloudprowler-cloud
14.6k

tailwind-4

Codifies Tailwind 4 className patterns for dynamic styling and variants.

Official
Intermediate
valec3valec3
1

tailwind-4

Guide Tailwind CSS styling with cn(), semantic tokens, and responsive utilities.

Community
Basic
v4lheruv4lheru

pact-frontend-patterns

Provide React frontend patterns for scalable, accessible UI components.

Community
Intermediate
JFEspanolitoJFEspanolito

tailwind-4

Enforce Tailwind CSS utility class patterns and semantic theming rules.

Community
Intermediate