skills.rest
SleyiW
SleyiWCOMMUNITY
Explore all skills by this author →
GitHub

tailwind-patterns

Guides Tailwind 4 CSS-first styling with semantic tokens and accessible component patterns.

Updated Apr 4, 2026
Search Tags:#accessibility#design tokens#tailwind css#dark mode#cva#css-first#frontend styling
One-click install
npx skills add https://github.com/SleyiW/iWana-neXt --skill tailwind-patterns-sleyiw
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: tailwind-patterns
Source: https://github.com/SleyiW/iWana-neXt/tree/main/.agents/skills/tailwind-patterns
Command: npx skills add https://github.com/SleyiW/iWana-neXt --skill tailwind-patterns-sleyiw

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires class-variance-authority, tailwindcss.

What problem does it solve? It prevents inconsistent, hard-to-maintain utility class sprawl in the iWana neXt web frontend by enforcing Tailwind 4 CSS-first conventions, semantic design tokens, and WCAG-compliant color usage. ## Core Features & Use Cases - Tailwind 4 CSS-first guidance: Defines tokens via @theme in globals.css instead of a tailwind.config.js, which must not be created. - Contrast and accessibility rules: Enforces WCAG AA contrast (e.g., iwana-secondary-700 for text on white) and visible focus, disabled, loading, and error states. - Component variant patterns: Uses CVA (class-variance-authority) for maintainable button and component variants with dark mode surface tokens. - Use Case: When building a new screen or reviewing a component with bloated classNames, apply this Skill to refactor toward semantic tokens, shared primitives, and responsive mobile-first layouts. ## Quick Start Review this component's Tailwind classes and refactor them to use the iWana semantic tokens with proper contrast and responsive states.

Frequently Asked Questions about tailwind-patterns

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

FAQPage Schema
How do I configure Tailwind 4 without a tailwind.config.js file?▼

Tailwind 4 uses CSS-first configuration where tokens are defined in an `@theme` block inside your globals.css file after importing `tailwindcss`. Creating or editing a `tailwind.config.js` is incorrect in this setup.

How do I create component variants with Tailwind and CVA?▼

Use the `cva` function from class-variance-authority to define base classes plus variant and size maps, with `defaultVariants` for fallback styling. This keeps repeated utility patterns in one maintainable definition instead of duplicating classNames.

Which color token should I use for text on white backgrounds?▼

Use `iwana-secondary-700` (#6A7A1C) for text on white because it achieves 6.2:1 contrast and passes WCAG AA. The base `iwana-secondary` (#A5C330) only reaches 2.3:1 and is restricted to decorative uses like backgrounds and borders.

Does Tailwind 4 support dark mode with custom tokens?▼

Yes, dark mode surface tokens like `dark-surface` and `dark-surface-2` are defined in the `@theme` block and applied with Tailwind's `dark:` prefix, for example `bg-white dark:bg-dark-surface` on container elements.

When should I avoid using backdrop-blur and glass effects?▼

Reserve `iwana-glass` and `backdrop-blur` for overlays, drawers, floating controls, or layers above content. Applying them broadly to tables, forms, or static panels adds visual noise without improving hierarchy or usability.

Related Skills

Explore More Software Engineering Skills→
CutTheChexxCutTheChexx

brand-builder

Create cohesive brand identities and scalable design systems for web applications.

Community
Advanced
namninhndnamninhnd

webapp-testing

Automate web application testing with Playwright across end-to-end, integration, and component tests.

Community
Intermediate
EIS-ITSEIS-ITS

Frontend Accessibility

Identify and fix accessibility issues in frontend interfaces using semantic HTML, ARIA, and keyboard navigation.

Official
Intermediate
0xKobold0xKobold
4

tailwind-v4

Configure Tailwind CSS v4 with CSS-first design tokens and @theme.

Official
Advanced