web-tailwind

Purpose

This skill enables the AI to assist with Tailwind CSS 4 for building responsive, utility-first web interfaces, focusing on features like utility classes, configuration, JIT compilation, arbitrary values, dark mode, plugins, and shadcn/ui integration.

When to Use

Use this skill when developing web projects that require rapid styling with reusable classes, such as creating responsive layouts, theming with dark mode, or integrating pre-built components from shadcn/ui. Apply it in scenarios like frontend development for React/Vue apps or static sites where CSS bloat needs minimization.

Key Capabilities

• Utility classes for direct styling (e.g., 'flex', 'p-4', 'hover:bg-blue-700').
• JIT mode for on-demand CSS generation to reduce bundle size.
• Arbitrary values for custom styling (e.g., 'w-[14rem]' for width).
• Dark mode support via 'dark:' prefix or media queries.
• Plugins for extending functionality, like adding custom utilities.
• shadcn/ui integration for component-based UI kits.
• Responsive design with breakpoints (e.g., 'md:flex' for medium screens and up).

Usage Patterns

To apply Tailwind classes, add them directly to HTML elements in your markup. For configuration, edit the tailwind.config.js file to customize themes, extend utilities, or enable JIT. Always import Tailwind's base, components, and utilities in your CSS entry point. For shadcn/ui, clone the repository and integrate components via Tailwind classes. To enable dark mode, set it in config and use the 'dark:' variant.