skills.rest
alvaldes
alvaldesCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

tailwind-4

Standardize Tailwind CSS 4 usage with cn() and semantic color classes.

Updated Mar 10, 2025
Search Tags:#theming#styling#responsive#tailwind#dark-mode#utility-classes#cn
One-click install
npx skills add https://github.com/alvaldes/alvaldes.dots --skill tailwind-4-alvaldes
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: tailwind-4
Source: https://github.com/alvaldes/alvaldes.dots/tree/main/opencode/skill/tailwind-4
Command: npx skills add https://github.com/alvaldes/alvaldes.dots --skill tailwind-4-alvaldes

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Inconsistent Tailwind usage across UI code leads to bloated class lists, slippery design tokens, and difficulty maintaining a cohesive look. This guide provides a unified approach to applying Tailwind CSS 4 patterns to ensure predictable styling and reduced cognitive load for developers.

Core Features & Use Cases

  • Clear rules for when to use cn() and how to compose classes with conditional logic.
  • Guidance on avoiding var() and hex colors in className in favor of semantic Tailwind utilities.
  • Common layout and typography patterns for responsive design, dark mode, and scalable component styling.

Quick Start

Apply Tailwind-4 patterns to standardize spacing, colors, and typography in a sample button component.

Frequently Asked Questions about tailwind-4

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

FAQPage Schema
How do I use cn() for conditional Tailwind CSS styling?▼

Avoid var() and hex colors in className by using semantic Tailwind utilities. This approach standardizes design tokens across projects, preventing slippery colors and maintaining a cohesive visual look throughout your UI.

What is the best way to standardize Tailwind dark mode and responsive patterns?▼

The best way to standardize Tailwind dark mode and responsive layouts is applying unified patterns for typography and spacing, which reduces cognitive load and ensures scalable, consistent component styling across projects.

Does this Tailwind 4 guide require specific dependencies or component libraries?▼

This Tailwind 4 guide requires no external dependencies or component libraries. It provides standalone rules for utility classes and theming, requiring only existing knowledge of Tailwind concepts and the cn() utility.

Why should I prefer semantic color classes over hex values in Tailwind className?▼

Prefer semantic color classes over hex values in Tailwind className to prevent slippery design tokens. Semantic utilities standardize theming, making dark mode implementation and overall UI maintenance significantly more predictable.

Related Skills

Explore More Software Engineering Skills→
JFEspanolitoJFEspanolito

tailwind-4

Enforce Tailwind CSS utility class patterns and semantic theming rules.

Community
Intermediate
ArogyaReddyArogyaReddy

visual-design-foundations

Define typography, color, spacing, and iconography design tokens for web and mobile UI.

Community
Advanced
TheBushidoCollectiveTheBushidoCollective
187

tailwind-utility-classes

Compose Tailwind CSS utility classes for responsive component styling.

Official
Intermediate
mgd34msumgd34msu
4

styled-components

Implement CSS-in-JS styling for React components with tagged template literals.

Community
Advanced