skills.rest
KilloconQ
KilloconQCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

tailwind-4

Codify Tailwind 4 className composition patterns with cn() and style props.

Updated Jun 22, 2024
Search Tags:#frontend#css#styling#pattern#tailwind#best-practices#cn
One-click install
npx skills add https://github.com/KilloconQ/dotfiles --skill tailwind-4-killoconq
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: tailwind-4
Source: https://github.com/KilloconQ/dotfiles/tree/main/opencode/.config/opencode/skills/tailwind-4
Command: npx skills add https://github.com/KilloconQ/dotfiles --skill tailwind-4-killoconq

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Resolve inconsistent Tailwind usage by codifying patterns and best practices for className composition.

Core Features & Use Cases

  • Guidance on Tailwind 4 patterns, the cn() utility, and safe usage of style props for dynamic values
  • Best practices for avoiding hex colors and var() in className while keeping semantic class usage
  • Real-world examples and decision trees for styling decisions across components

Quick Start

Create a component that follows the Tailwind-4 guidance by replacing var() in className with semantic Tailwind classes and applying cn() 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 use the cn() utility for conditional Tailwind styling in React?▼

Use the cn() utility to compose conditional Tailwind classes in React components, safely merging semantic class names. It guides className construction to resolve inconsistent styling by codifying best practices for dynamic styling decisions.

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

Avoiding var() and hex colors in Tailwind className ensures semantic class usage and consistent styling. The guidance promotes using semantic Tailwind classes instead, resolving inconsistent patterns across frontend components.

What is the best way to handle dynamic styling values in Tailwind 4?▼

The best way to handle dynamic styling values in Tailwind 4 is applying style props for dynamic values. This approach enforces safe usage while keeping className composition standardized through the cn() utility.

Can I use Tailwind 4 best practices across similar frontend frameworks?▼

Yes, Tailwind 4 best practices for className composition apply across React and similar frontend frameworks. The guidance supports safe usage of style props and cn() utilities for dynamic styling decisions in various component structures.

How do I standardize inconsistent Tailwind class patterns in my components?▼

Standardize inconsistent Tailwind class patterns by codifying best practices for className composition. Replace var() in className with semantic Tailwind classes and apply cn() for conditional styling to enforce consistent frontend component design.

When do I need to use style props instead of className in Tailwind?▼

Use style props instead of className when applying dynamic styling values in Tailwind 4. This prevents var() usage in className, promoting semantic class usage while safely handling dynamic styles through cn() utilities.

Related Skills

Explore More Software Engineering Skills→
avvaleavvale

tailwind-4

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

Official
Intermediate
ScorpionConMateScorpionConMate
1

tailwind-4

Enforce non-var() className usage and semantic Tailwind classes in frontend frameworks.

Community
Basic
CamiloAndresGTRUniandesCamiloAndresGTRUniandes
19

tailwind-4

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

Community
Basic
GenuinehGenuineh

frontend-styling-twind

Configure Twind and Tailwind CSS design systems for reusable component styling.

Community
Intermediate