Does it support Tailwind's dark mode?

Yes, it includes patterns for implementing dark: variant classes and handling various element states like hover, focus, and active.

Can I use this for mobile-first design?

Yes, the skill emphasizes mobile-first principles using Tailwind's standard breakpoint system including sm, md, lg, and xl prefixes.

How does this skill help with Tailwind CSS in Rails?

It provides optimized utility-first patterns, responsive layout templates, and consistent design tokens specifically for Rails-based frontend development.

How do I trigger this skill in Claude Code?

You can trigger the skill by using keywords like 'tailwind', 'style with', 'css classes', or 'responsive layout' during your chat session.

Tailwind CSS Expert

Name: Tailwind CSS Expert
Author: aviflombaum

byaviflombaum

•

デザインツール

Implements utility-first Tailwind CSS patterns and responsive UI components specifically optimized for Ruby on Rails applications.

概要

Tailwind CSS Expert provides a comprehensive suite of utility-first styling patterns and responsive design best practices for modern frontend development. It enables developers to rapidly build production-grade user interfaces by providing pre-defined templates for layouts, typography, buttons, cards, and forms while ensuring mobile-first responsiveness and dark mode compatibility. This skill streamlines the styling workflow within Claude Code by enforcing consistent spacing, design tokens, and state management, making it an essential tool for developers aiming for polished, accessible, and maintainable Rails views.

主な機能

Mobile-first responsive layout patterns using standard Tailwind breakpoints
Comprehensive support for dark mode and interactive states like hover and focus
Production-ready design patterns for complex components like cards and grids
Advanced animation and transition utilities for enhanced user experiences
Pre-configured utility classes for typography, buttons, and interactive elements
30 GitHub stars

ユースケース

Styling complex forms and interactive buttons with consistent design tokens
Building a responsive dashboard layout with mobile-first grid systems
Implementing accessible dark mode and focus states across a Rails application

概要

主な機能

Mobile-first responsive layout patterns using standard Tailwind breakpoints
Comprehensive support for dark mode and interactive states like hover and focus
Production-ready design patterns for complex components like cards and grids
Advanced animation and transition utilities for enhanced user experiences
Pre-configured utility classes for typography, buttons, and interactive elements
30 GitHub stars

ユースケース

Styling complex forms and interactive buttons with consistent design tokens
Building a responsive dashboard layout with mobile-first grid systems
Implementing accessible dark mode and focus states across a Rails application