Tailwind Css
Build and style React components with Tailwind CSS utility classes
What You Can Do
You can write clean, maintainable Tailwind CSS directly in React JSX using utility-first principles. This skill helps you compose responsive layouts, implement dark mode themes, extract reusable component patterns, convert existing CSS to Tailwind, and troubleshoot Tailwind configuration issues. It's optimized for dashboards, forms, cards, modals, and other typical application interfaces.
Features
Write Tailwind classes directly in className attributes with proper formatting and line breaks for readability
Apply mobile-first breakpoints (sm:, md:, lg:, xl:) to create adaptive layouts
Configure and implement light/dark theme variants using Tailwind's dark mode utilities
Leverage theme scales for spacing, colors, and typography instead of arbitrary values
Identify when to extract markup into components vs. using @apply directives
Set up tailwind.config.js for v3.x and CSS imports for v4.x with custom theme values
Combine utilities with clsx, cva, and tailwind-merge for conditional and dynamic styling
Convert plain CSS or styled-components to Tailwind utility-based patterns
Example Output
Example 1: Responsive card component
<div className="bg-white dark:bg-slate-900 rounded-lg shadow-md p-4 sm:p-6 md:p-8">
<h2 className="text-lg sm:text-xl md:text-2xl font-bold text-slate-900 dark:text-white mb-2">
Card Title
</h2>
<p className="text-sm sm:text-base text-slate-600 dark:text-slate-300">
Description text here.
</p>
</div>
Example 2: Form input with validation states
const inputClasses = clsx(
'w-full px-3 py-2 border rounded-md text-sm',
'focus:outline-none focus:ring-2 focus:ring-offset-2 transition',
error
? 'border-red-500 focus:ring-red-500'
: 'border-slate-300 focus:ring-blue-500'
);
<input type="text" className={inputClasses} />
Example 3: Tailwind config with custom theme
module.exports = {
theme: {
extend: {
colors: {
brand: { 500: '#3b82f6', 600: '#2563eb' }
},
spacing: { '128': '32rem' }
}
}
}
What's Included
- SKILL.md: Complete Tailwind CSS styling instruction set with core principles, version detection, and best practices
- Responsive design checklist: Mobile-first breakpoint strategy and common responsive patterns
- Component composition guide: Decision framework for utilities vs. @apply vs. extracted components
- Dark mode setup template: Configuration and implementation patterns for light/dark themes
- Tailwind config examples: Starter configs for v3.x and v4.x with custom theme extensions
Who It's For
- React developers — Building component libraries and application UIs
- Frontend engineers — Implementing design systems with Tailwind tokens
- UI/UX engineers — Translating designs into responsive, maintainable styling
- Product designers coding their own prototypes — Creating interactive UI mockups
- Full-stack developers — Styling React components in Next.js and Vite projects
Best For
- Styling new React components from design specs
- Converting plain CSS or styled-components to Tailwind
- Building responsive layouts with mobile-first design
- Implementing light/dark mode themes
- Fixing broken Tailwind setups and configuration issues
- Organizing and refactoring long className strings
- Creating reusable component patterns and design systems
You might also like
You'll conduct structured culture audits that go beyond surface-level observations to identify root causes of dysfunction in design teams. Using organizational psychology research, you can analyze team feedback patterns, map collaboration barriers across disciplines, and design targeted interventions that address psychological safety gaps, siloed workflows, and retention risks. Claude helps you transform culture diagnostics into measurable improvement plans tied to specific team performance outcomes.
by calesthio
Analyze raw usability testing data—transcripts, session notes, task completion rates, and participant feedback—to surface recurring patterns and user behaviors. Claude identifies the highest-impact issues, extracts testable insights about user mental models, and generates prioritized recommendations ranked by severity, frequency, and business impact. This cuts manual synthesis time from hours to minutes while maintaining analytical rigor.
by calesthio
You can systematically evaluate UX/UI design candidates across multiple disciplines—UX researchers, UI designers, product designers, design systems engineers, and coordinators—using role-specific competency frameworks. The skill converts vague impressions into defensible scoring systems that account for cross-functional collaboration capability, process maturity, and systems-thinking critical to design ops success. You'll compare candidates across seniority levels, document evaluation decisions for compliance, and build consistent hiring rubrics your entire design team can deploy.
by calesthio
You can systematically design reusable responsive grid systems, establish spacing scales and breakpoint strategies, and document component layout behaviors for seamless developer handoff. This skill generates technical layout specifications that reduce design-to-development friction and ensure accessibility compliance from the design phase, enabling teams to build consistent, scalable web interfaces across all devices.
by calesthio
Diagnose and fix performance bottlenecks across your entire stack. Measure Core Web Vitals against 2026 standards, analyze bundle size bloat, identify unused dependencies, and optimize rendering strategies and caching. You'll receive specific code changes, configuration tweaks, and architecture recommendations tailored to your framework.
This skill guides you through creating strategic content frameworks that go beyond tone and voice guidelines. You'll synthesize user research with business goals, define content principles, structure information architecture, and document messaging frameworks that teams can reference repeatedly. The result is a comprehensive strategy that ensures every piece of UX content—from microcopy to help documentation—serves both users and business outcomes.
by calesthio
You can create professional presentations in multiple modes—from quick lightweight prototypes to fully referenced decks with visualization planning. The skill guides you through a serial pipeline that normalizes source material, detects your input mode (quick, basic, or advanced), compiles your deck structure, and produces either self-contained HTML or exportable PPTX formats. You maintain control at each gate with clear confirmation points before advancing to the next phase.
by russell-cell
You can generate detailed interaction specifications for complex user flows and component behaviors that eliminate ambiguity in handoff. The skill produces structured documentation including state diagrams, transition tables, animation timing, keyboard navigation patterns, error handling workflows, and accessibility requirements—all formatted for both designers and developers to reference.
by calesthio