Foundations & Tooling Tailwind CSS v4
02. Tailwind CSS v4, Styling & Asset Architecture
Explore Tailwind CSS v4 CSS-first token configuration, container queries, modern layout systems, responsive image formats, and immutable asset delivery.
styling-assets.css
css
@import "tailwindcss";/* 1. Tailwind CSS v4 CSS-first Design Tokens */@theme { --color-brand-primary: oklch(0.62 0.24 264.5); --color-brand-accent: oklch(0.85 0.18 190.2); --font-sans: 'Inter Variable', system-ui, sans-serif; --font-mono: 'JetBrains Mono Variable', monospace;}@custom-variant dark (&:where([data-theme="dark"], [data-theme="dark"] *));/* 2. Container Queries for Modular Component Sizing */@container (min-width: 420px) { .metric-card { display: grid; grid-template-columns: 1fr auto; gap: 1.5rem; }}/* 3. High-Performance Static Asset Delivery *//* Immutable Cache-Control headers for hashed bundles: Cache-Control: public, max-age=31536000, immutable*/Tailwind CSS v4 & Modern Asset Pipelines
Tailwind CSS v4 introduces a CSS-first architecture that eliminates tailwind.config.js in favor of native @theme blocks, cascade layers, and container queries.
- CSS-First
@theme: Tokens bind directly to native CSS custom properties without JavaScript runtime compilation overhead. - Modular Container Queries (
@container): Components adapt based on their parent container width rather than the global viewport width. - Asset Optimisation & Immutable Delivery: Modern bundlers hash static assets
and serve them with
Cache-Control: public, max-age=31536000, immutable.
Container Query Live Simulator @container
Modular Card
Responsive Metric Widget
Adapts layout when container > 420px
Active Layout
2-Column Grid
Modern Media Format Comparison AVIF / WebP / PNG
Payload Weight: 18.4 KB
Compression Efficiency: 92% vs raw PNG
Format Profile: Modern Next-Gen AV1