skills.rest
kurojs
kurojsCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

tailwind-4

Enforce Tailwind CSS 4 styling rules for class names and colors.

2|Updated Jul 29, 2025
Search Tags:#frontend#css#styling#patterns#responsive#tailwind#cn
One-click install
npx skills add https://github.com/kurojs/ender4-dots --skill tailwind-4-kurojs
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: tailwind-4
Source: https://github.com/kurojs/ender4-dots/tree/main/.config/opencode/skill/tailwind-4
Command: npx skills add https://github.com/kurojs/ender4-dots --skill tailwind-4-kurojs

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Tailwind CSS 4 patterns and best practices help teams standardize styling decisions, reduce design drift, and avoid common pitfalls in className usage.

Core Features & Use Cases

  • Enforced rules: never use var() in className; avoid hex colors in className; promote semantic color classes.
  • Utilities and patterns: usage of cn() for conditional classes, style props for dynamic values, and a curated set of layout, spacing, typography, and responsive strategies.
  • Use Case: Refactor a large component library to align with Tailwind-4 guidelines to improve consistency and maintainability.

Quick Start

Update component styles to replace var() in className with semantic Tailwind utilities and adopt the cn() pattern for conditional styling.

Frequently Asked Questions about tailwind-4

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

FAQPage Schema
How do I manage dynamic styles in Tailwind CSS without using var() in className?▼

To manage dynamic styles in Tailwind CSS, use the style prop for dynamic values and apply the cn() pattern for conditional classes, avoiding var() directly in className.

Why should I avoid hex colors in Tailwind CSS className?▼

Avoiding hex colors in Tailwind CSS className promotes semantic color classes, reducing design drift and standardizing styling decisions across a large component library.

What is the best way to conditionally apply Tailwind CSS classes?▼

The best way to conditionally apply Tailwind CSS classes is using the cn() utility, which enforces consistent patterns and manages dynamic styling across components effectively.

How do I refactor a component library to align with Tailwind 4 guidelines?▼

Refactor a component library for Tailwind 4 by replacing var() in className with semantic utilities and adopting the cn() pattern for conditional styling to improve maintainability.

Does Tailwind CSS 4 work with dark mode and responsive design patterns?▼

Yes, Tailwind CSS 4 defines specific responsive and dark-mode patterns to standardize frontend styling constraints and maintain consistent UI across different screen sizes.

When should I not use inline hex values for frontend styling?▼

You should not use inline hex values for frontend styling when standardizing design systems, as semantic color classes prevent design drift and ensure maintainability.

Related Skills

Explore More Software Engineering Skills→
joshdonnelljoshdonnell
2

tailwindcss-development

Apply Tailwind CSS v4 utilities to style components and pages.

Community
Intermediate
AngelP17AngelP17
1

tailwind-design-system

Standardize UI design with Tailwind-based design tokens and component patterns.

Community
Advanced
prowler-cloudprowler-cloud
14.6k

tailwind-4

Codifies Tailwind 4 className patterns for dynamic styling and variants.

Official
Intermediate
FlorianRiquelmeFlorianRiquelme

Frontend CSS

Standardize CSS across frameworks with consistent methodology and production optimization.

Community
Basic