skills.rest
juanjaragavi
juanjaragaviCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

tailwind-css-patterns

Implements responsive Tailwind CSS utility patterns for React, Vue, and Svelte components.

Updated Sep 17, 2026
Search Tags:#accessibility#responsive design#tailwind css#dark mode#react components#frontend styling#utility-first css
One-click install
npx skills add https://github.com/juanjaragavi/utilities-manager --skill tailwind-css-patterns-juanjaragavi
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: tailwind-css-patterns
Source: https://github.com/juanjaragavi/utilities-manager/tree/main/.agents/skills/tailwind-css-patterns
Command: npx skills add https://github.com/juanjaragavi/utilities-manager --skill tailwind-css-patterns-juanjaragavi

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? Styling modern web interfaces consistently across breakpoints, themes, and frameworks requires deep knowledge of Tailwind CSS utilities, and misconfigured builds or missing accessibility patterns cause production bugs that are hard to diagnose. ## Core Features & Use Cases - Responsive Layout Patterns: Mobile-first flexbox, grid, spacing, and typography utilities with breakpoint references from sm through 2xl. - Component Recipes: Ready-to-adapt patterns for cards, navigation bars, forms, modals, and React components with variant props. - Dark Mode & Accessibility: Class- and media-based dark mode toggles, focus management, ARIA patterns, color contrast guidance, and reduced-motion support. - Configuration & Performance: CSS-first v4.1 configuration with @theme, custom utilities, container queries, content-path purging, and production build optimization. - Use Case: When building a product card grid that must adapt from one column on mobile to four on desktop with dark mode support, apply the responsive grid and dark variant patterns directly instead of writing custom CSS. ## Quick Start Ask the assistant to style a React component with Tailwind CSS, for example to build a responsive card grid with dark mode support.

Frequently Asked Questions about tailwind-css-patterns

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

FAQPage Schema
How do I build a responsive grid layout with Tailwind CSS?▼

Use the grid utility with responsive column prefixes, such as grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4, to render one column on mobile, two on tablets, and four on desktops. Tailwind is mobile-first, so base classes apply to small screens and prefixed classes override at larger breakpoints.

How to enable dark mode in Tailwind CSS?▼

Enable dark mode by setting darkMode to 'class' or 'media' in the config, then apply dark: prefixed utilities like dark:bg-gray-900. For class strategy, toggle the dark class on the html element with document.documentElement.classList.toggle('dark').

Does Tailwind CSS v4 support CSS-first configuration?▼

Yes, Tailwind v4.1 supports CSS-first configuration using the @theme directive inside your stylesheet, where you define custom colors, fonts, spacing, breakpoints, and animations as CSS custom properties. This removes the need for a JavaScript config file in most projects.

Why are my Tailwind classes not applying in production?▼

Classes are usually purged because content paths in the config do not include all template files. Verify the content array covers every HTML, JSX, TSX, Vue, or Svelte file, then rebuild the CSS so the scanner detects the used utilities.

How do I make Tailwind components accessible?▼

Add visible focus indicators with focus:ring utilities, use aria-label on icon-only buttons, maintain at least 4.5:1 color contrast for text, and respect reduced motion with motion-reduce:transition-none. The accessibility reference includes a checklist covering these requirements.

Related Skills

Explore More Software Engineering Skills→
wfvuewfvue
3

tailwindcss

Apply Tailwind CSS v4 utilities with Vite plugin integration for responsive and dark mode styling.

Community
Intermediate
telum-aitelum-ai
2

visual-testing-web

Run visual regression tests across breakpoints and states with Playwright.

Official
Intermediate
theofernandezztheofernandezz

ui-engineering

Define reusable UI patterns with design tokens, glassmorphism, and Tailwind v4.

Community
Advanced
mgd34msumgd34msu
4

vanilla-extract

Implement zero-runtime CSS-in-TypeScript with static extraction at build time.

Community
Intermediate