skills.rest
sebasmzg
sebasmzgCOMMUNITY
Explore all skills by this author →
GitHub

tailwind-4

Enforce Tailwind CSS 4 semantic theme classes and cn-style merging in React components.

Updated Mar 15, 2026
Search Tags:#theming#css#styling#responsive#tailwind#utility-classes#cn
One-click install
npx skills add https://github.com/sebasmzg/sebas.dot --skill tailwind-4-sebasmzg
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: tailwind-4
Source: https://github.com/sebasmzg/sebas.dot/tree/main/.config/opencode/skill/tailwind-4
Command: npx skills add https://github.com/sebasmzg/sebas.dot --skill tailwind-4-sebasmzg

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Provides a concise decision framework and best practices to remove inconsistent Tailwind usage, prevent var() and hex color usage inside class names, and standardize conditional class merging in component codebases. It reduces styling bugs, unpredictable theme behavior, and fragile class conflicts by promoting semantic Tailwind tokens and clear rules for dynamic or library-driven styling.

Core Features & Use Cases

  • Styling decision tree that guides whether to use static className, conditional merging, or inline styles for dynamic values.
  • Clear prohibition of var() and hex values inside class names and recommendation to use theme classes instead, improving theming and design system consistency.
  • Guidance on using a cn-style utility for conditional and conflicting class merging, and fallback patterns for libraries that don't accept class names by using style constants.
  • Real-world use: audit React components to replace non-semantic color usages, apply responsive and dark-mode patterns, and centralize chart/library color constants.

Quick Start

Audit a component and replace any className uses of var() or hex colors with semantic Tailwind theme classes, and convert conditional strings into a cn-style merged expression where appropriate.

Frequently Asked Questions about tailwind-4

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

FAQPage Schema
How do I remove hex colors and var() from Tailwind CSS class names in React components?▼

Audit React components to replace inline var() and hex color values in className strings with semantic Tailwind theme classes, then use a cn-style utility for conditional class merging.

What is the best way to merge conditional Tailwind utility classes in component-driven codebases?▼

Use a cn-style utility to merge conditional Tailwind utility classes, resolving conflicts and preventing fragile styling bugs during component refactors or library integrations.

When should I use inline styles instead of Tailwind classes for dynamic styling values?▼

Use inline style constants as a fallback pattern for libraries that do not accept class names, ensuring dynamic values render correctly without breaking Tailwind theming conventions.

Does this styling convention guide work with Tailwind CSS v4 responsive and dark-mode patterns?▼

Yes, it applies to Tailwind CSS v4 responsive and dark-mode patterns, providing a decision tree to standardize semantic theme class usage across component codebases.

Why should I avoid using CSS variables directly inside Tailwind class names?▼

Using var() inside Tailwind class names causes inconsistent theming and unpredictable design system behavior; semantic Tailwind tokens provide centralized control and reduce styling conflicts.

Related Skills

Explore More Software Engineering Skills→
CamiloAndresGTRUniandesCamiloAndresGTRUniandes
19

tailwind-4

Enforce safe Tailwind class composition and theme usage in React/TypeScript.

Community
Basic
nguyenthienthanhnguyenthienthanh
24

nativewind-generator

Generate NativeWind-styled React Native components with TypeScript typings and dark mode support.

Community
Intermediate
gutierrezp22gutierrezp22

tailwind-4

Guide Tailwind CSS styling with cn() utility and semantic classes.

Community
Intermediate
Quanby-IT-SolutionsQuanby-IT-Solutions
2

tailwind-shadcn

Standardize Tailwind v4 and shadcn/ui styling in apps/web with ThemeProvider theming.

Official
Intermediate