Page 8 - CSS

Not every project can or should switch to Tailwind entirely in one go. Running Tailwind alongside legacy CSS is a deliberate transitional approach that builds new features directly with utilities, while existing, hand-written CSS keeps running unchanged until it gets retired component by component.

The Holy Grail Layout of header, two side columns, main content and footer was long considered one of the hardest CSS problems around. With CSS Grid, template areas, gap and subgrid, the same layout can be built today in a handful of clearly readable lines, with no float hacks, no tables and no fragile absolute positioning.

Tooltips, dropdowns and contextual overlays were solved for years either with JavaScript or with fragile CSS hacks. CSS Anchor Positioning changes that fundamentally: anchor(), position-anchor and @position-try enable precise, context-aware positioning directly in the stylesheet, without a single line of JavaScript.

The cursor property can do more than switch between a handful of system icons: url() lets you embed custom cursor images, and multi-step fallback chains keep the interface understandable even when a graphic fails to load. Anyone using custom cursors needs to know exactly where they add real value and where they only hurt usability.

CSS Houdini opens up the browser's rendering process to developers. Custom backgrounds, patterns and layout algorithms as worklets, usable directly in CSS. The most powerful, and also the most complex, approach to extending CSS.

CSS Custom Properties are powerful but untyped: the browser treats them as plain strings. CSS @property changes that fundamentally. With a type declaration, inheritance control and an initial value, Custom Properties become full, animatable CSS values. Gradients, colors and numbers can then be interpolated and hooked into transitions.

A scrollbar that suddenly appears or disappears shifts the entire visible content by its own width, because under classic overflow: auto it shrinks the available content area. scrollbar-gutter: stable reserves that space permanently, whether the bar is currently visible or not, eliminating one of the most stubborn layout shift bugs on the web.

Custom utility classes are part of everyday life in every Tailwind project. With the new @utility directive in Tailwind CSS v4, custom utilities become first-class utilities: full variant support, correct cascade placement, and not a single line of JavaScript required anymore.

Every CSS grid knows two kinds of tracks: explicit tracks, deliberately defined with grid-template-columns and grid-template-rows, and implicit tracks, which the browser generates automatically once content grows beyond those defined boundaries. Anyone unfamiliar with grid-auto-rows and grid-auto-columns leaves the size of those auto-generated tracks to the browser's default and ends up puzzled by rows that turn out much larger or smaller than the rest of the grid.

CSS :has() is more than a parent selector, it is a complete context selector. Layout decisions that used to require JavaScript event handlers can now be made declaratively right in the stylesheet. That changes how you build CSS architectures.