TailwindCss Complete Documentation

---

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.