coding-with-tailiwnd

What problem does it solve?

This Skill provides a structured approach for developing components with Tailwind CSS, ensuring consistency, modularity, and adherence to best practices. It simplifies styling by guiding the use of @apply and @layer components directives, and prevents common pitfalls in Tailwind CSS development.

Core Features & Use Cases

• Tailwind CSS Best Practices: Enforces modularity, separate CSS files, and use of @apply and @layer components.
• Tailwind v4.1 Context: Directs to specific documentation for design principles, custom styles, functions, and directives.
• Component Creation Guidelines: Specifies where to create new components (srs/components) and what not to touch (srs/components/ui).
• Use Case: When building a new UI component for a Next.js app, use this skill to ensure all Tailwind CSS styling follows the project's conventions, including using nested classes and custom utilities.

Quick Start

Create a new button component in srs/components and style it using Tailwind CSS @layer components and @apply directives.