Tailwind CSS

Getting Started

1. What Is Tailwind CSS?Why Tailwind styles HTML with small, single-purpose classes instead of writing custom CSS files.
2. Setting Up Tailwind CSSHow Tailwind's build pipeline turns the classes in your markup into a single generated CSS file.
3. Your First Utility ClassesBuilding a simple card component to see how naming conventions and value scales work across Tailwind's utilities.

Core Utility Categories

1. Spacing and SizingPadding, margin, gap, width, and height utilities, and the numeric scale they all share.
2. Colors and BackgroundsHow Tailwind's color-and-shade naming system works, and applying it to text, backgrounds, and borders.
3. Typography UtilitiesControlling font size, weight, line height, alignment, and text overflow with utility classes.
4. Borders, Shadows, and EffectsBorder width, radius, and color, plus box shadows, opacity, and other visual effect utilities.

Responsive and Interactive Design

1. Responsive Design with BreakpointsUsing sm:, md:, and lg: prefixes to change styles at different viewport widths, mobile-first.
2. Hover, Focus, and State VariantsStyling interactive states like hover, focus, and disabled with variant prefixes instead of pseudo-classes.
3. Dark ModeStyling a dark theme alongside a light one using the dark: variant, and choosing between OS-driven and manual toggling.

Layout with Flexbox and Grid

1. Flexbox UtilitiesBuilding flexible one-dimensional layouts with flex, justify-, items-, and gap utilities.
2. Grid UtilitiesTwo-dimensional layout with grid-cols-, grid-rows-, and column/row spanning utilities.

Customization and Reuse

1. Customizing the ThemeDefining brand colors, custom spacing, and fonts as CSS variables in @theme instead of a JS config file.
2. Arbitrary ValuesUsing square-bracket syntax like w-[13px] to reach exact values outside Tailwind's design scales, and when that's appropriate.
3. Reusing Styles and @applyExtracting repeated utility combinations into components instead of leaning on @apply, and when @apply is still worth it.

Tailwind in Practice

1. Conditional Classes in JSXToggling utility classes based on component state, and why string concatenation breaks Tailwind's build scan.
2. Best Practices and Common MistakesKeeping class lists readable, avoiding common pitfalls, and using tooling to sort and lint utility classes automatically.