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
This skill helps you craft error messages and notifications that prioritize clarity and actionability over cleverness. You'll generate empathetic microcopy for error states, in-app notifications, empty states, and edge cases—then test variations against different user personas to minimize cognitive load and maximize task completion rates. It bridges UX research insights with production-ready copy that reduces support tickets and builds user trust.
by calesthio
Conduct comprehensive design operations audits using repeatable protocols that quantify inefficiencies across workflows, handoffs, and governance. You'll identify systemic bottlenecks, map dependencies and ownership gaps, and produce actionable recommendations with business cases for process improvements. The framework helps you move from reactive problem-solving to proactive optimization by accounting for team capacity, tool constraints, and organizational context.
by calesthio
You can generate customized interview frameworks that assess design ops candidates against specific competencies aligned with your team's maturity and challenges. The skill produces behavioral interview questions, technical scenario assessments, and scoring rubrics that help interview panels evaluate candidates objectively across process optimization, metrics thinking, tool knowledge, and organizational influence—moving beyond portfolio review to predict job-ready performance.
by calesthio
You can translate research objectives into executable test protocols that recruit the right participants, ask the right questions, and measure outcomes clearly. This skill helps you design moderated or unmoderated tests that validate interaction patterns, test information architecture, evaluate new features, or compare design alternatives—with structured analysis frameworks built in.
by calesthio
You can create self-contained HTML presentations with distinctive design aesthetics, smooth animations, and custom typography that feel intentional rather than generic. Convert PowerPoint files directly into interactive web slides, or build custom decks from scratch with precise control over layout, color schemes, and motion. Every slide fits perfectly in the viewport—no scrolling, no dependencies, no setup required.
You can rapidly build user interfaces by leveraging pre-built, fully accessible React components that you own and control. Claude helps you select the right shadcn/ui components for your needs, customize them with Tailwind CSS, implement complex patterns like forms with validation, data tables, and charts, and integrate them seamlessly into Next.js, Vite, Remix, or Astro projects.
You can rapidly build responsive, production-ready UI designs using Tailwind's utility-first approach. Apply low-level utility classes directly to HTML elements to create custom designs without writing CSS, implement mobile-first responsive layouts, add dark mode and theme customization, and generate optimized CSS bundles through build-time processing that includes only the classes you actually use.
by calesthio
Conduct comprehensive culture assessments that go beyond pulse surveys to uncover hidden friction points impacting designer satisfaction and retention. You'll quantify culture health across key dimensions like psychological safety, autonomy, growth opportunity, and collaboration effectiveness, then generate prioritized improvement roadmaps with specific interventions backed by team feedback. This framework helps you build evidence-based business cases for culture investments and track improvements across quarterly cycles.
by calesthio