skills.rest
MARUCIE
MARUCIECOMMUNITY
Explore all skills by this author →
GitHub

tailwind

Compose Tailwind CSS utilities for responsive layouts, dark mode, and component variants.

1|Updated Mar 18, 2026
Search Tags:#responsive design#tailwind css#utility-first#dark mode#cva#tailwind-merge#react styling
One-click install
npx skills add https://github.com/MARUCIE/openclaw-foundry --skill tailwind-marucie
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: tailwind
Source: https://github.com/MARUCIE/openclaw-foundry/tree/main/web/public/packs/spellbook-frontend-engineer/skills/tailwind
Command: npx skills add https://github.com/MARUCIE/openclaw-foundry --skill tailwind-marucie

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires clsx, tailwind-merge, class-variance-authority.

What problem does it solve? Writing and maintaining CSS at scale leads to scattered media queries, conflicting class names, and inconsistent design tokens. This Skill provides proven Tailwind CSS patterns so you can build responsive, dark-mode-ready interfaces with predictable class composition instead of ad-hoc stylesheets. ## Core Features & Use Cases - Utility Composition Patterns: Ready-to-use snippets for flexbox, grid, spacing, typography, and state variants (hover, focus, group, peer). - Component Variants with cva: Define typed, reusable component APIs (buttons, badges) with base styles plus variant and size props instead of duplicated if/else class strings. - Conflict Resolution with cn(): Merge conditional classes safely using clsx and tailwind-merge so overrides behave predictably. - Use Case: You are building a Next.js dashboard that needs a responsive card grid, dark mode support, and a consistent button system. Apply these patterns to configure the theme, add dark: variants, and encapsulate button styles with cva. ## Quick Start Ask the AI to build a responsive card component with dark mode support and a cva-based button using Tailwind CSS.

Frequently Asked Questions about tailwind

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

FAQPage Schema
How do I conditionally apply Tailwind classes in React?▼

Use a cn() helper built from clsx and tailwind-merge to combine conditional classes without conflicts. Pass base classes, conditional expressions, and external className overrides; tailwind-merge ensures the last conflicting utility wins predictably.

How to create button variants with Tailwind CSS?▼

Use cva (class-variance-authority) to define base styles plus typed variant and size options in one declaration. The component then accepts variant props like variant="destructive" size="lg" instead of repeating long class strings.

Does Tailwind dark mode work with Next.js?▼

Yes, set darkMode: 'class' in tailwind.config and toggle a dark class on the html element, typically via next-themes. Then pair every color utility with a dark: variant such as bg-white dark:bg-gray-900.

Why are my dynamically generated Tailwind classes not working?▼

Tailwind's static scanner only detects complete class names written in source files, so template literals like `bg-${color}` never generate CSS. Use full class names with cn() for conditions, or extend the theme config for repeated values.

What is the difference between Tailwind v3 and v4 configuration?▼

Tailwind v4 moves configuration from tailwind.config into CSS using @import "tailwindcss" and an @theme block for tokens. It removes the PostCSS requirement and defaults dark mode to media queries instead of a class strategy.

Related Skills

Explore More Software Engineering Skills→
BoneTheDeveloperBoneTheDeveloper

ui-styling

Style React UIs with shadcn/ui components and Tailwind CSS.

Community
Advanced
PrasadTelasulaPrasadTelasula

component-testing

Test React components with React Testing Library and Playwright for frontend correctness.

Community
Intermediate
THRISHAL12345THRISHAL12345

ux-theming

Register theme-aware colors and style VS Code widgets with CSS variables.

Community
Intermediate
wshobsonwshobson
38.6k

web-component-design

Design reusable web UI components with patterns and styling approaches.

Community
Intermediate