skills.rest
raulisai
raulisaiCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

tailwind-css-patterns

Implements responsive Tailwind CSS utility patterns for component styling and layout design.

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

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? Styling modern web interfaces consistently across breakpoints, themes, and components requires deep knowledge of Tailwind CSS utilities, and misconfigured content paths or dark mode setups cause silent production bugs. This Skill provides structured patterns and troubleshooting guidance for building responsive, accessible UIs with Tailwind CSS v4.1+. ## Core Features & Use Cases - Responsive Layout Patterns: Mobile-first flexbox, grid, spacing, and typography utilities with breakpoint references from sm to 2xl. - Component Recipes: Ready-to-adapt patterns for cards, navigation bars, forms, modals, and React components with variant support. - Dark Mode & Accessibility: Class- and media-based dark mode strategies, focus management, ARIA patterns, contrast guidelines, and reduced-motion support. - Configuration & Performance: CSS-first @theme configuration, custom utilities and variants, content path setup, and production purging guidance. - Use Case: When building a dashboard page in React, use this Skill to compose a responsive card grid, add a dark mode toggle, and verify focus states and contrast meet WCAG standards before committing. ## Quick Start Ask the assistant to style a React component with Tailwind CSS, for example to build a responsive product card with dark mode support and accessible focus states.

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 layout with Tailwind CSS?▼

Start mobile-first by writing base styles for small screens, then add breakpoint prefixes like sm:, md:, and lg: for larger viewports. Use grid utilities such as grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 or flex utilities like flex-col md:flex-row to adapt layouts per breakpoint.

How to add dark mode to a Tailwind CSS project?▼

Configure darkMode as 'class' or 'media' in your Tailwind config, then apply dark: prefixed utilities like dark:bg-gray-900. For class strategy, toggle the dark class on the html element and set it before body renders to avoid a flash of incorrect theme.

Why are my Tailwind CSS 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 your source files, rebuild the CSS, and safelist any dynamically generated class names that the scanner cannot detect.

Does Tailwind CSS v4 support CSS-first configuration?▼

Yes, Tailwind v4.1+ supports CSS-first configuration using the @theme directive to define custom colors, fonts, spacing, breakpoints, and animations directly in CSS. It also adds @utility for custom utilities and @custom-variant for custom conditional variants without JavaScript plugins.

How do I make Tailwind components accessible?▼

Add visible focus indicators with focus:ring utilities, use sr-only for screen-reader-only text, and include ARIA labels on icon-only buttons. Ensure color contrast meets WCAG ratios and respect reduced-motion preferences with motion-reduce: and motion-safe: variants.

When should I avoid arbitrary values in Tailwind?▼

Use arbitrary values sparingly and only for one-off layout or accessibility needs, since they bypass the design token system. Prefer Tailwind's spacing, color, and typography scales for consistency, and extract repeated patterns into reusable components instead of long class strings.

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
PrasadTelasulaPrasadTelasula

component-testing

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

Community
Intermediate
mauriciodelriomauriciodelrio
3

a11y-rules

Audit React and Next.js components for WCAG 2.2 AA accessibility violations.

Community
Intermediate
Ben1821Ben1821

ui-styling

Automate UI component installation, styling, and theming with shadcn/ui and Tailwind CSS.

Community
Advanced