skills.rest
usmangurowa
usmangurowaCOMMUNITY
Explore all skills by this author →
Website𝕏@UsmanGurowaGitHub

tailwind-patterns

Provides production-ready Tailwind CSS patterns for responsive layouts, cards, forms, buttons, navigation, and typography.

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

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? Building consistent, responsive, dark-mode-compatible UI components with Tailwind CSS requires remembering dozens of class combinations, spacing scales, and breakpoint conventions. This Skill eliminates guesswork by providing tested, copy-ready patterns for common website components. ## Core Features & Use Cases - Component Pattern Library: Ready-to-use Tailwind class combinations for cards, buttons, forms, navigation, typography, and grid layouts with mobile-first responsive breakpoints. - Dark Mode via Semantic Tokens: Enforces semantic color tokens (bg-card, text-foreground, border-border) so components automatically adapt to light and dark themes without manual dark: variants. - Correction Rules: A rules file that fixes common mistakes like raw colors, missing responsive prefixes, inconsistent spacing, and missing hover states. - Use Case: When building a landing page with a hero section, pricing cards, and a contact form, apply the documented patterns to get consistent spacing, responsive grids, and theme-safe colors immediately. ## Quick Start Ask the AI to build a responsive pricing card section using the tailwind-patterns skill with semantic color tokens and mobile-first breakpoints.

Frequently Asked Questions about tailwind-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 mobile-first grid classes like grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 to show one column on mobile, two on tablets, and three on desktop. For dynamic column counts, use grid-cols-[repeat(auto-fit,minmax(280px,1fr))] to auto-adjust based on available space.

How to make Tailwind components work in dark mode?▼

Use semantic color tokens like bg-card, text-foreground, text-muted-foreground, and border-border instead of raw colors like bg-white or bg-blue-500. Semantic tokens automatically adapt to light and dark themes without manual dark: variant classes.

Does this Tailwind pattern library support Tailwind CSS v4?▼

Yes, the patterns are compatible with both Tailwind CSS v3.x and v4.x. They rely on standard utility classes and semantic tokens that work across both versions, including projects using shadcn/ui conventions.

Why does my Tailwind text overflow in grid layouts?▼

Grid items have implicit min-width: auto, which prevents shrinking below content width. Add min-w-0 to the grid item and apply truncate to the text element so long content clips with an ellipsis instead of overflowing.

What spacing values should I use for consistent Tailwind design?▼

Stick to a consistent scale of 4, 6, 8, 12, 16, and 24 for padding, margins, and gaps. Use py-16 sm:py-24 for section spacing and p-6 as the standard card padding to maintain visual rhythm across components.

Related Skills

Explore More Design & Creative Skills→
kellyclaudeaikellyclaudeai

Tailwind v4 Design Tokens Skill

Configure Tailwind CSS v4 with semantic design tokens for Vite and PostCSS projects.

Community
Intermediate
gooseworks-aigooseworks-ai
6

create-value-prop-ad

Scrape brand value propositions and product visuals into a sequential vertical ad.

Official
Advanced
samymitysamymity
1

browser-qa

Automate end-to-end browser QA for web applications with smoke, interaction, visual regression, and accessibility checks.

Community
Intermediate
KumarAdi8KumarAdi8

ui-styling

Build accessible, responsive UIs with shadcn/ui and Tailwind CSS for React projects.

Community
Advanced