| 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.
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
Verification
- Check browser for visual rendering
- Test responsive breakpoints
- 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
