CSS

Live Edit mirrors HTML and CSS changes into the browser in real time, no reload button needed. For simple frontend files the effect is impressive, for build-heavy Hyva/Tailwind setups it pays to know the technique's limits.

Solving a product gallery with pure CSS sounds like a trick, but it is a resilient pattern: scroll snap containers, the checkbox hack principle and the :target pseudo class cover thumbnail navigation, carousel and full screen view without loading a single kilobyte of JavaScript.

overflow: clip is the more modern, often more performant alternative to overflow: hidden. The decisive difference is not in the visible result but in the invisible side effects: clip creates no stacking context and no new block formatting context, so it avoids unwanted z-index problems and enables more precise paint isolation for the browser renderer.

@custom-media lets you name a media query condition once and reuse it everywhere in the stylesheet, instead of repeating the same width value in twenty places. Today PostCSS handles that translation at build time, but the Media Queries Level 5 specification brings exactly this capability directly into the browser.

The View Transitions API brings something that used to require SPAs with heavy frameworks and turns it into a native browser feature: seamless animations when navigating between pages, with view-transition-name for shared elements, CSS pseudo-elements for full style control, and cross-document support for multi page apps.

An image comparison slider shows two overlaid images and lets users drag the boundary between before and after. With CSS clip-path, unified pointer events and Alpine.js as a reactive state layer, this interaction comes together with no jQuery plugin and no extra slider framework at all.

With CSS clamp(), font sizes and spacing scale continuously between a minimum and a maximum, without a single media query. The math behind it takes about ten minutes to learn, and it replaces entire breakpoint systems with one expressive declaration.

Every animation passes through the browser's rendering pipeline of layout, paint, and composite, and animating width, top, or margin forces the browser into expensive recalculations on every single frame. This article shows why transform and opacity run almost for free on the compositor thread, how to use will-change correctly, and how to refactor existing animations for real gains.

Every line of text in a browser carries invisible space above and below the actual letters, a side effect of font metrics reserved for line spacing. With text-box-trim and text-box-edge, that space can be removed precisely, without the fragile negative margin tricks that had to be recalibrated every time a font changed.

Tailwind CSS v4 is not an incremental update, it is a paradigm shift. The JavaScript configuration file gives way to pure CSS configuration, PostCSS is replaced by Lightning CSS, and the design token system now works directly through CSS custom properties. This guide shows how to structure the migration from v3 to v4 without introducing regressions.