tailwind

Complete Tailwind CSS documentation. Use when working with Tailwind CSS utility classes, responsive design, dark mode, animations, custom configurations, plugins, or styling questions. Covers all utility classes, modifiers, configuration options, and best practices.

SKILL.md

---
name: tailwind
description: Complete Tailwind CSS documentation. Use when working with Tailwind CSS utility classes, responsive design, dark mode, animations, custom configurations, plugins, or styling questions. Covers all utility classes, modifiers, configuration options, and best practices.
---

# Tailwind CSS Documentation

Complete Tailwind CSS documentation embedded in markdown. Read from `references/` to answer questions about utility classes, responsive design, customization, and best practices.

## Documentation Structure

All documentation is in `references/` with individual files for each utility and concept:

### Core Concepts
- `installation.mdx` - Setup and installation
- `editor-setup.mdx` - IDE configuration
- `using-with-preprocessors.mdx` - SCSS, PostCSS integration
- `optimizing-for-production.mdx` - Build optimization
- `browser-support.mdx` - Browser compatibility

### Layout & Spacing
- `container.mdx`, `columns.mdx` - Layout utilities
- `aspect-ratio.mdx` - Aspect ratio control
- `box-sizing.mdx` - Box model
- `display.mdx` - Display properties
- `float.mdx`, `clear.mdx` - Floats
- `position.mdx` - Positioning
- `top-right-bottom-left.mdx` - Inset utilities
- `visibility.mdx`, `z-index.mdx` - Z-index and visibility
- `padding.mdx`, `margin.mdx` - Spacing
- `space-between.mdx` - Gap utilities

### Flexbox & Grid
- `flex-direction.mdx`, `flex-wrap.mdx`, `flex.mdx` - Flexbox
- `flex-grow.mdx`, `flex-shrink.mdx`, `flex-basis.mdx` - Flex sizing
- `order.mdx` - Flex/grid order
- `grid-template-columns.mdx`, `grid-template-rows.mdx` - Grid
- `grid-column.mdx`, `grid-row.mdx` - Grid placement
- `gap.mdx` - Grid/flex gap
- `justify-content.mdx`, `justify-items.mdx`, `justify-self.mdx` - Justify
- `align-content.mdx`, `align-items.mdx`, `align-self.mdx` - Align
- `place-content.mdx`, `place-items.mdx`, `place-self.mdx` - Place

### Typography
- `font-family.mdx`, `font-size.mdx`, `font-weight.mdx` - Fonts
- `font-smoothing.mdx`, `font-style.mdx`, `font-variant-numeric.mdx`
- `letter-spacing.mdx`, `line-height.mdx`, `line-clamp.mdx` - Spacing
- `list-style-type.mdx`, `list-style-position.mdx` - Lists
- `text-align.mdx`, `text-color.mdx`, `text-decoration.mdx` - Text
- `text-transform.mdx`, `text-overflow.mdx`, `text-wrap.mdx`
- `text-indent.mdx`, `vertical-align.mdx`, `whitespace.mdx`
- `word-break.mdx`, `hyphens.mdx`

### Backgrounds
- `background-attachment.mdx`, `background-clip.mdx` - Background
- `background-color.mdx`, `background-origin.mdx`
- `background-position.mdx`, `background-repeat.mdx`
- `background-size.mdx`, `background-image.mdx`
- `gradient-color-stops.mdx` - Gradients

### Borders
- `border-radius.mdx`, `border-width.mdx`, `border-color.mdx` - Borders
- `border-style.mdx`, `divide-width.mdx`, `divide-color.mdx`
- `divide-style.mdx`, `outline-width.mdx`, `outline-color.mdx`
- `outline-style.mdx`, `outline-offset.mdx`, `ring-width.mdx`
- `ring-color.mdx`, `ring-offset-width.mdx`, `ring-offset-color.mdx`

### Effects & Filters
- `box-shadow.mdx`, `box-shadow-color.mdx` - Shadows
- `opacity.mdx`, `mix-blend-mode.mdx`, `background-blend-mode.mdx`
- `filter.mdx` - Filters
- `blur.mdx`, `brightness.mdx`, `contrast.mdx`, `grayscale.mdx`
- `hue-rotate.mdx`, `invert.mdx`, `saturate.mdx`, `sepia.mdx`
- `backdrop-filter.mdx` - Backdrop filters
- `backdrop-blur.mdx`, `backdrop-brightness.mdx`, etc.

### Transitions & Animations
- `transition-property.mdx`, `transition-duration.mdx` - Transitions
- `transition-timing-function.mdx`, `transition-delay.mdx`
- `animation.mdx` - Animations

### Transforms
- `scale.mdx`, `rotate.mdx`, `translate.mdx`, `skew.mdx` - Transforms
- `transform-origin.mdx` - Transform origin

### Interactivity
- `accent-color.mdx`, `appearance.mdx`, `cursor.mdx` - User interaction
- `caret-color.mdx`, `pointer-events.mdx`, `resize.mdx`
- `scroll-behavior.mdx`, `scroll-margin.mdx`, `scroll-padding.mdx`
- `scroll-snap-align.mdx`, `scroll-snap-stop.mdx`, `scroll-snap-type.mdx`
- `touch-action.mdx`, `user-select.mdx`, `will-change.mdx`

### Customization
- `adding-custom-styles.mdx` - Custom CSS
- `configuration.mdx` - tailwind.config.js
- `content-configuration.mdx` - Content paths
- `theme.mdx` - Theme customization
- `screens.mdx` - Breakpoints
- `colors.mdx` - Color palette
- `spacing.mdx` - Spacing scale
- `plugins.mdx` - Plugin system
- `presets.mdx` - Config presets

### Advanced Features
- `dark-mode.mdx` - Dark mode
- `reusing-styles.mdx` - Component patterns
- `functions-and-directives.mdx` - @apply, @layer, etc.

## Quick Reference

### Common Tasks

| Task | File to Read |
|------|--------------|
| Setup Tailwind | `installation.mdx` |
| Responsive design | `responsive-design.mdx`, `screens.mdx` |
| Dark mode | `dark-mode.mdx` |
| Custom colors | `customizing-colors.mdx`, `colors.mdx` |
| Layout utilities | `container.mdx`, `display.mdx`, `position.mdx` |
| Flexbox | `flex-direction.mdx`, `justify-content.mdx`, `align-items.mdx` |
| Grid | `grid-template-columns.mdx`, `gap.mdx` |
| Typography | `font-size.mdx`, `font-weight.mdx`, `text-color.mdx` |
| Spacing | `padding.mdx`, `margin.mdx`, `space-between.mdx` |
| Backgrounds | `background-color.mdx`, `background-image.mdx` |
| Borders | `border-width.mdx`, `border-color.mdx`, `border-radius.mdx` |
| Shadows | `box-shadow.mdx` |
| Transitions | `transition-property.mdx` |
| Custom config | `configuration.mdx`, `theme.mdx` |
| Plugins | `plugins.mdx` |

### When to Use This Skill

- Working with Tailwind CSS utility classes
- Responsive design questions
- Dark mode implementation
- Custom Tailwind configuration
- Plugin development
- Migration to Tailwind
- Styling patterns and best practices

### How to Navigate

1. **For specific utilities:** Find the utility name file (e.g., `flex.mdx`, `text-color.mdx`)
2. **For concepts:** Check concept files (installation, dark-mode, responsive-design)
3. **For customization:** See configuration files (configuration, theme, plugins)
4. **For best practices:** Read reusing-styles, adding-custom-styles

All files are `.mdx` (Markdown + JSX) but readable as plain markdown.