● Tailwind CSS 4 Deep Dive

concept bundles — container queries → variants → arbitrary values → oklch color → animations → build pipeline ← all tutorials
🔗 Companion section Where ../frontend/tailwind/ (4 bundles) teaches v4 onboarding, this section goes advanced. frontend/tailwind/ →

Phase 1 — Container Queries

Components respond to their CONTAINER's size, not the viewport. The future of responsive design.

01 ★
Container Queries Basics
@container, container-type, the mental model
anchor 02
Named Containers
@container/sidebar, scoped queries
 03
Container Variants
@sm:, @md:, @lg:, range queries
 04
Container Patterns
component-driven responsive design

Phase 2 — The Variant Ecosystem

Beyond hover: and dark: — the full variant system for state, interaction, accessibility.

05
Group & Peer
parent/sibling state-based styling
 06
:has() Variant
has-*, group-has-*, peer-has-*
 07
Child Variants
first:, last:, even:, odd:, empty:
 08
Form State
required:, valid:, invalid:, autofill:
 09
A11y Variants
motion-safe:, forced-colors:, contrast-more:
 10
Directional & Media
rtl:, ltr:, print:, open:
 11
Data Attributes
data-*, [data-state=open] patterns

Phase 3 — Arbitrary Values & Dynamic Utilities

When built-in utilities aren't enough: arbitrary values, variants, and functional @utility.

12
Arbitrary Values
[17rem], [color:var(--x)], bg-[url(...)]
 13
Arbitrary Variants
[&:nth-child(3)]:, [@supports(...)]:
 14
Functional @utility
--value(integer), --modifier(n)
 15
Arbitrary Properties
[--scroll-offset:7px], CSS vars on the fly

Phase 4 — Color & Theming Internals

oklch color space, color-mix, @theme inline, multi-theme systems, gradients, @property.

16
OKLCH Colors
perceptual uniformity, why v4 switched
 17
Color-Mix & Opacity
color-mix(), /40 opacity modifiers
 18
@theme inline
when var resolution breaks
 19
Multi-Theme Systems
scoped themes, data-theme switching
 20
Gradients v4
bg-linear-*, bg-radial-*, bg-conic-*
 21
@property Directive
typed CSS custom properties, animatable vars

Phase 5 — Modern CSS Layout

Native CSS nesting, subgrid, the spacing scale, aspect-ratio — modern layout with Tailwind v4.

22
CSS Nesting
native nesting in v4, & selector
 23
Subgrid
inheriting parent grid tracks
 24
Gap & Spacing Scale
--spacing, gap/padding/margin derivation
 25
Aspect Ratio & Object
aspect-ratio, object-fit/position

Phase 6 — Animations & Motion

Keyframes, transitions, 3D transforms, @starting-style, scroll-driven, view transitions.

26
Keyframes & Animate
@keyframes + --animate-* namespace
 27
Transitions & Timing
transition-*, duration-*, ease-*
 28
3D Transforms
rotate-*, scale-*, perspective, 3D
 29
@starting-style
enter/exit transitions, display: none
new in v4 30
Filters & Masks
backdrop-blur, filter, mask, blend
 31
Scroll-Driven Animations
animation-timeline: scroll(), view()
 32
View Transitions
View Transitions API + Tailwind

Phase 7 — Build, Directives & Production

@source, @plugin, Preflight, build tooling, v3→v4 migration, production optimization.

33
@source Detection
content scanning, globs, monorepo
 34
Plugins & Directives
@plugin, @reference, @variant
 35
Preflight & Reset
what Preflight resets, @layer base
 36
Build Tooling
CLI, Vite, PostCSS, Lightning CSS
 37
v3 → v4 Migration
breaking changes, upgrade tool
 38
Production Optimization
tree-shaking, pinned builds, targeting
Each bundle = a working zero-dep .html demo with a [check: OK] gold-check + a static .md guide. Styling: Tailwind v4 via @tailwindcss/browser@4 CDN. Workflow: ../skills/concept-builder/SKILL.md. Build plan: TODO.md.