sc30gsw/tailwind-css-patterns
sample/harness/tanstack-start/skills/tailwind-css-patterns/SKILL.md
Provides comprehensive Tailwind CSS utility-first styling patterns including responsive design, layout utilities, flexbox, grid, spacing, typography, colors, and modern CSS best practices. Use when styling React/Vue/Svelte components, building responsive layouts, implementing design systems, or optimizing CSS workflow.
$ install --global
skillsauthnpx skillsauth add sc30gsw/claude-code-customes tailwind-css-patternsInstall this skill globally with one command. Works with Claude Code, Cursor, and Windsurf.
Security Scan Results
3 of 9 scanners reported clean
Some scanners were skipped, did not run, or reported a non-clean status. Review each row below.
3
Scanners Passed
9
Scanners in report
Clean
TrivyContainer and dependency vulnerability scanner
95%
Clean
SemgrepStatic code analysis for vulnerabilities
95%
Clean
mcp-scan (Snyk)Model Context Protocol security validation
95%
Skipped
Snyk (dep)Open source security scanning
50%
Skipped
Socket.devSupply chain security analysis
50%
Skipped
VirusTotalMulti-engine malware detection
50%
Skipped
CrowdStrikeAdvanced threat intelligence
50%
Skipped
OSV-ScannerOpen Source Vulnerability database check
50%
Skipped
OWASP Dep-Check
50%
Last scanned: May 30, 2026, 5:13 AM23.7s9 files scanned
SKILL.md
- name:
- tailwind-css-patterns
- description:
- Provides comprehensive Tailwind CSS utility-first styling patterns including responsive design, layout utilities, flexbox, grid, spacing, typography, colors, and modern CSS best practices. Use when styling React/Vue/Svelte components, building responsive layouts, implementing design systems, or optimizing CSS workflow.
- allowed-tools:
- Read, Write, Edit, Glob, Grep, Bash
Tailwind CSS Development Patterns
Expert guide for building modern, responsive user interfaces with Tailwind CSS utility-first framework. Covers v4.1+ features including CSS-first configuration, custom utilities, and enhanced developer experience.
Overview
Provides actionable patterns for responsive, accessible UIs with Tailwind CSS v4.1+. Covers utility composition, dark mode, component patterns, and performance optimization.
When to Use
- Styling React/Vue/Svelte components
- Building responsive layouts and grids
- Implementing design systems
- Adding dark mode support
- Optimizing CSS workflow
Quick Reference
Responsive Breakpoints
| Prefix | Min Width | Description |
| ------ | --------- | ------------- |
| sm: | 640px | Small screens |
| md: | 768px | Tablets |
| lg: | 1024px | Desktops |
| xl: | 1280px | Large screens |
| 2xl: | 1536px | Extra large |
Common Patterns
<!-- Center content -->
<div class="flex items-center justify-center min-h-screen">Content</div>
<!-- Responsive grid -->
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
<!-- Items -->
</div>
<!-- Card component -->
<div class="bg-white rounded-lg shadow-lg p-6">
<h3 class="text-xl font-bold">Title</h3>
<p class="text-gray-600">Description</p>
</div>
Instructions
- Start Mobile-First: Write base styles for mobile, add responsive prefixes (
sm:,md:,lg:) for larger screens - Use Design Tokens: Leverage Tailwind's spacing, color, and typography scales
- Compose Utilities: Combine multiple utilities for complex styles
- Extract Components: Create reusable component classes for repeated patterns
- Configure Theme: Customize design tokens in
tailwind.config.jsor using@theme - Verify Changes: Test at each breakpoint using DevTools responsive mode. Check for visual regressions and accessibility issues before committing.
Examples
Responsive Card Component
function ProductCard({ product }: { product: Product }) {
return (
<div className="bg-white rounded-lg shadow-lg overflow-hidden sm:flex">
<img className="h-48 w-full object-cover sm:h-auto sm:w-48" src={product.image} />
<div className="p-6">
<h3 className="text-lg font-semibold">{product.name}</h3>
<button className="mt-4 px-4 py-2 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700">
Add to Cart
</button>
</div>
</div>
);
}
Dark Mode Toggle
<div class="bg-white dark:bg-gray-900 text-gray-900 dark:text-white">
<h1 class="dark:text-white">Title</h1>
</div>
Form Input
<input
class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
placeholder="[email protected]"
/>
Best Practices
- Consistent Spacing: Use Tailwind's spacing scale (4, 8, 12, 16, etc.)
- Color Palette: Stick to Tailwind's color system for consistency
- Component Extraction: Extract repeated patterns into reusable components
- Utility Composition: Prefer utility classes over
@applyfor maintainability - Semantic HTML: Use proper HTML elements with Tailwind classes
- Performance: Ensure content paths include all template files for optimal purging
- Accessibility: Include focus styles, ARIA labels, and respect user preferences (reduced-motion)
Troubleshooting
Classes Not Applying
- Check content paths: Ensure all template files are included in
content: []in config - Verify build: Run
npm run buildto regenerate purged CSS - Dev mode: Use
npx tailwindcss -owith--watchflag for live updates
Responsive Styles Not Working
- Order matters: Responsive prefixes must come before non-responsive (e.g.,
md:flexnotflex md:flex) - Check breakpoint values: Verify breakpoints match your design requirements
- DevTools: Use browser DevTools responsive mode to test at each breakpoint
Dark Mode Issues
- Verify config: Ensure
darkMode: 'class'or'media'is set correctly - Toggle implementation: Use
document.documentElement.classList.toggle('dark')for class strategy - Initial flash: Add
darkclass to<html>before body renders
Constraints and Warnings
- Class Proliferation: Long class strings reduce readability; extract into components
- Content Paths: Misconfigured paths cause classes to be purged in production
- Arbitrary Values: Use sparingly; prefer design tokens for consistency
- Specificity Issues: Avoid
@applywith complex selectors - Dark Mode: Requires correct configuration (
classormediastrategy) - Browser Support: Check Tailwind docs for compatibility notes
References
- references/layout-patterns.md — Flexbox, grid, spacing, typography, colors
- references/component-patterns.md — Cards, navigation, forms, modals, React patterns
- references/responsive-design.md — Responsive patterns, dark mode, container queries
- references/animations.md — Transitions, transforms, built-in animations, motion preferences
- references/performance.md — Bundle optimization, CSS optimization, production builds
- references/accessibility.md — Focus management, screen readers, color contrast, ARIA
- references/configuration.md — CSS-first config, JavaScript config, plugins, presets
- references/reference.md — Additional reference materials
External Resources
- Tailwind CSS Docs
- Tailwind UI
- Tailwind Play
Related Skills
sc30gsw/skill-creator
tools
VerifiedTrustedCommunity
Guide for creating effective skills. This skill should be used when users want to create a new skill (or update an existing skill) that extends Claude's capabilities with specialized knowledge, workflows, or tool integrations.
10SKILL.mdUpdated May 30, 2026
sc30gsw/skills/sdd-workflow
testing
VerifiedTrustedCommunity
# sdd-workflow — Workflow Status Dashboard ## Slash Command ``` /sdd-workflow [slug] ``` ## Purpose Read-only meta skill. Displays the current state of the SDD workflow — which phases are complete, which is next, and any blockers. Does NOT modify any files. --- ## This Skill is Read-Only `sdd-workflow` never writes to or modifies any file. It only reads spec files and git history to report status. There is no approval gate for this skill. --- ## Usage: Specific Feature ``` /sdd-workflo
10SKILL.mdUpdated May 30, 2026
sc30gsw/skills/sdd-tasks
content-media
VerifiedTrustedCommunity
# sdd-tasks **Slash command**: `/sdd-tasks <slug>` **Purpose**: Generate `tasks.md` (TASK-001..N) and `progress.md` from `requirements.md` and `design.md`. --- ## Prerequisites - `.claude/specs/<slug>/requirements.md` must exist - `.claude/specs/<slug>/design.md` must exist (run `/sdd-design` first) --- ## Steps ### 1. Read spec inputs ``` .claude/specs/<slug>/requirements.md .claude/specs/<slug>/design.md ``` Extract: - Every REQ-XXX ID with its acceptance criteria - Every design sect
10SKILL.mdUpdated May 30, 2026
sc30gsw/skills/sdd-review
development
VerifiedTrustedCommunity
# sdd-review — Post-Implementation Code Review ## Slash Command ``` /sdd-review <slug> ``` ## Purpose Run code review and security review on all changes introduced by the feature branch. Append structured findings to `review.md`. Does NOT auto-apply fixes — only proposes them. --- ## Prerequisites - `sdd-impl` has completed: all tasks in `progress.md` are `done` (or at least one is `done`; partial reviews are allowed). - The feature branch must have at least one commit ahead of `main`. -
10SKILL.mdUpdated May 30, 2026