tailwindcss-development

name	tailwindcss-development
description	Styles applications using Tailwind CSS v3 utilities. Activates when adding styles, restyling components, working with gradients, spacing, layout, flex, grid, responsive design, dark mode, colors, typography, or borders; or when the user mentions CSS, styling, classes, Tailwind, restyle, hero section, cards, buttons, or any visual/UI changes.

Tailwind CSS Development

When to Apply

Activate this skill when:

• Adding styles to components or pages
• Working with responsive design
• Implementing dark mode
• Extracting repeated patterns into components
• Debugging spacing or layout issues

Documentation

Use search-docs for detailed Tailwind CSS v3 patterns and documentation.

Basic Usage

• Use Tailwind CSS classes to style HTML. Check and follow existing Tailwind conventions in the project before introducing new patterns.
• Offer to extract repeated patterns into components that match the project's conventions (e.g., Blade, JSX, Vue).
• Consider class placement, order, priority, and defaults. Remove redundant classes, add classes to parent or child elements carefully to reduce repetition, and group elements logically.

Tailwind CSS v3 Specifics

• Always use Tailwind CSS v3 and verify you're using only classes it supports.
• Configuration is done in the tailwind.config.js file.
• Import using @tailwind directives:

@tailwind base; @tailwind components; @tailwind utilities;

Spacing

When listing items, use gap utilities for spacing; don't use margins.

Item 1

Item 2

Dark Mode

If existing pages and components support dark mode, new pages and components must support it the same way, typically using the dark: variant:

Content adapts to color scheme

Common Patterns

Flexbox Layout

Left content

Right content

Grid Layout

Card 1

Card 2

Card 3

Verification

1. Check browser for visual rendering
2. Test responsive breakpoints
3. Verify dark mode if project uses it

Common Pitfalls

• Using margins for spacing between siblings instead of gap utilities
• Forgetting to add dark mode variants when the project uses dark mode
• Not checking existing project conventions before adding new utilities
• Overusing inline styles when Tailwind classes would suffice