What happens if I use deprecated utilities like flex-shrink?

The skill identifies deprecated Tailwind v3 utilities and automatically replaces them with their v4 equivalents, such as 'shrink' instead of 'flex-shrink'.

Does this skill support Tailwind CSS v4 specific features?

Yes, it is explicitly designed for Tailwind CSS v4, supporting the @theme directive, @import syntax, and updated utility names while avoiding deprecated v3 patterns.

Can this skill help with dark mode implementation?

Absolutely. It can automatically apply dark: variants to components and ensure that new styles remain consistent with your project's existing dark mode strategy.

How does it handle theme configuration?

The skill follows the v4 'CSS-first' approach, meaning it applies theme customizations directly within your CSS files using the @theme block rather than a tailwind.config.js file.

Tailwind CSS v4 Development

Name: Tailwind CSS v4 Development
Author: MasyukAI

byMasyukAI

0•

设计工具

Styles modern web applications using Tailwind CSS v4 utilities and CSS-first configuration patterns.

This skill equips Claude with specialized knowledge for Tailwind CSS v4, enabling it to build high-performance, responsive interfaces using the latest utility-first standards. It moves beyond basic styling by focusing on v4-specific features like CSS-first theme configuration, the new @import syntax, and the replacement of deprecated utilities. Whether you are implementing dark mode, refactoring layouts with flex and grid, or extracting repeated patterns into reusable components, this skill ensures your styling remains clean, maintainable, and aligned with modern frontend best practices.

主要功能

010 GitHub stars

02Native Tailwind CSS v4 syntax and utility implementation

03CSS-first theme configuration using the @theme directive

04Responsive design and dark mode variant orchestration

05Automated replacement of deprecated v3 utilities like opacity-specific classes

06Optimization of layout patterns using gap utilities, Flexbox, and Grid

使用场景

01Migrating a frontend project from Tailwind v3 to the modern v4 CSS-first architecture.

02Building complex, mobile-responsive UI components that require dark mode support.

03Refactoring redundant CSS classes into streamlined, component-based styling patterns.

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add masyukai/kakkay tailwindcss-development

For use in Claude.ai and ChatGPT

主要功能

010 GitHub stars

02Native Tailwind CSS v4 syntax and utility implementation

03CSS-first theme configuration using the @theme directive

04Responsive design and dark mode variant orchestration

05Automated replacement of deprecated v3 utilities like opacity-specific classes

06Optimization of layout patterns using gap utilities, Flexbox, and Grid

使用场景

01Migrating a frontend project from Tailwind v3 to the modern v4 CSS-first architecture.

02Building complex, mobile-responsive UI components that require dark mode support.

03Refactoring redundant CSS classes into streamlined, component-based styling patterns.

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add masyukai/kakkay tailwindcss-development

For use in Claude.ai and ChatGPT