tailwind

完整的 Tailwind CSS 文档。在处理 Tailwind CSS 实用程序类、响应式设计、深色模式、动画、自定义配置、插件或样式问题时使用。涵盖所有实用程序类、修饰符、配置选项和最佳实践。

## 概述（中文）

完整的 Tailwind CSS 文档。在处理 Tailwind CSS 实用程序类、响应式设计、深色模式、动画、自定义配置、插件或样式问题时使用。涵盖所有实用程序类、修饰符、配置选项和最佳实践。

## 原文

# 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.