skills.rest
himuraxkenji
himuraxkenjiCOMMUNITY
Explore all skills by this author →
GitHub

tailwind-4

Enforce Tailwind 4 coding patterns for React/TypeScript frontend styling.

Updated Aug 23, 2026
Search Tags:#frontend#react#styling#web-development#tailwind#classnames#cn
One-click install
npx skills add https://github.com/himuraxkenji/dotfiles-nix --skill tailwind-4-himuraxkenji
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: tailwind-4
Source: https://github.com/himuraxkenji/dotfiles-nix/tree/main/claude/skills/tailwind-4
Command: npx skills add https://github.com/himuraxkenji/dotfiles-nix --skill tailwind-4-himuraxkenji

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Enforce Tailwind 4 patterns to ensure maintainable, safe, and consistent UI styling.

Core Features & Use Cases

  • Never use var() in className and prefer semantic Tailwind classes for theming.
  • Never use hex colors in className; rely on Tailwind color tokens and design-system tokens.
  • The cn() utility for conditional and conflict-free class composition.
  • Style values for truly dynamic values via the style prop when needed, while keeping design tokens centralized.
  • Practical patterns: Flexbox, Grid, Spacing, Typography, Borders & Shadows, States, Responsive, Dark Mode, and basic usage with common components.

Quick Start

Apply the Tailwind-4 guidelines to a sample component by using semantic Tailwind classes, avoiding var() in classNames, and implementing conditional styling with cn().

Frequently Asked Questions about tailwind-4

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

FAQPage Schema
How do I handle conditional styling in React components using Tailwind?▼

Use the cn() utility for conditional styling in React components to compose conflict-free Tailwind classes. This ensures maintainable class merging and prevents duplicate or contradictory CSS properties when applying dynamic styles.

Why should I avoid var() and hex colors in Tailwind 4 className strings?▼

Avoid var() and hex colors in className to ensure maintainable UI styling in Tailwind 4. Prefer semantic Tailwind classes and color tokens to keep design system theming centralized, consistent, and safe across all frontend components.

What is the best way to apply dynamic values in Tailwind without breaking design tokens?▼

The best way to apply truly dynamic values is using the style prop directly on the component. This keeps your Tailwind design tokens centralized while safely handling dynamic runtime values that cannot be predefined in className.

Can I use Tailwind 4 patterns in a modern React and TypeScript project?▼

Yes, Tailwind 4 patterns are designed for modern React and TypeScript frontend projects. Applying these guidelines ensures maintainable, safe, and consistent UI styling across your component architecture using standard cn() utilities.

When should I use semantic Tailwind classes instead of CSS variables for theming?▼

Use semantic Tailwind classes instead of CSS variables when theming components to enforce the no-var-in-class rule. This maintains consistent styling logic by relying on Tailwind color tokens and centralized design-system tokens rather than raw variable references.

Related Skills

Explore More Software Engineering Skills→
avvaleavvale

tailwind-4

Standardize Tailwind CSS 4 class usage in React and Vue components.

Official
Intermediate
yunusemrgrlyunusemrgrl

tailwindcss-development

Automate Tailwind CSS development with utility classes for responsive layouts.

Community
Intermediate
JNZaderJNZader

tailwind-4

Apply Tailwind CSS patterns and best practices to frontend styling tasks.

Community
Intermediate
gil00pitagil00pita

styled-components

Style React components with CSS-in-JS using styled-components.

Community
Advanced