tailwind

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.