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
@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 Optimization & 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