TailwindCss Complete Documentation

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.