Page 7 - CSS

The CSS cascade is not a matter of chance, it is a precisely defined algorithm. Anyone who understands how the browser weighs origin, importance, specificity and order writes stylesheets that behave predictably, instead of fighting their own rules with !important.

The default Tailwind spacing scale covers many projects well, but it quickly reaches its limits once a custom design system enters the picture. Extending the Tailwind spacing scale with @theme in Tailwind v4 on purpose, instead of sprinkling arbitrary pixel values everywhere, produces a spacing system that stays consistent across buttons, cards and full pages.

Once a user activates Windows high contrast mode, the operating system uncompromisingly replaces most of a website's colors with a limited system palette. With forced-colors, system color keywords and forced-color-adjust, an interface stays usable instead of letting borders, icons and states silently disappear.

Align nested grid elements to the tracks of the parent grid, without JavaScript, without workarounds. CSS Grid Subgrid elegantly and declaratively solves the alignment problem that has long plagued card layouts, forms and multi-column designs.

Badges that hang over a corner, image stacks with a depth effect, and offset cards only look polished once negative margins, inset utilities and transform utilities work together deliberately. Understanding how these three tools differ, and where stacking contexts cause unexpected overlaps, lets you build overlap layouts that stay stable across responsive size changes.

As soon as custom CSS is written outside of utility classes, the same question keeps coming up: how do you reach the values from @theme without maintaining them twice? The theme() function in Tailwind CSS v4 answers exactly that, and it works differently than one might expect from CSS custom properties.

Most developers only know nth-child through odd and even, yet behind it sits a complete linear formula that enables far more complex patterns. This collection explains the An+B math, nth-last-child and the of S syntax through concrete recipes for grids, lists and pagination.

Scroll Snap brings the behavior of classic carousel libraries straight into the browser: the user scrolls freely, but the container locks into defined positions cleanly and without jank. Combine scroll-snap-type and scroll-snap-align correctly and you drop an entire JavaScript dependency while getting touch gestures, keyboard control and accessibility essentially for free.

The classic JavaScript style API only knows strings: style.width returns "320px" no matter whether it is a length, an angle, or a plain number, and any calculation with it starts with parsing and ends with rebuilding a string. The CSS Typed OM replaces that with real, typed objects that can be added, multiplied, and converted between units directly, without the detour through text.

A widget embedded on someone else's page must keep its own color scheme without being overridden by the host page, and without polluting the host's styles in return. CSS Cascade Layers, :where(), and a dedicated token namespace solve this component theming problem in Tailwind CSS v4, without Shadow DOM.