tailwind-config

What problem does it solve?

Inconsistent Tailwind CSS configurations across projects lead to styling issues, build errors, and difficulty maintaining a unified design system. This skill automates the setup and validation of Tailwind CSS, ensuring consistent and efficient styling workflows.

Core Features & Use Cases

• Standard Templates: Provides canonical tailwind.config.js and src/index.css templates for consistent setup.
• 5-Rule Validation: Audits existing configurations against critical standards: required content paths, theme extension, plugins array, correct file naming, and necessary dependencies.
• PostCSS Integration: Ensures proper integration with PostCSS directives (@tailwind base, @tailwind components, @tailwind utilities).
• Design System Consistency: Helps maintain a unified look and feel across all applications by enforcing standard Tailwind practices.
• Use Case: Automatically set up Tailwind CSS for a new React project, ensuring correct content scanning paths and PostCSS directives, or audit an existing configuration to confirm proper theme extension and plugin usage.

Quick Start

Create a tailwind.config.js and src/index.css for a new React application.