Page 7 - Tailwind 4

@apply is one of the most controversial features in Tailwind CSS. Condemned wholesale too often, reached for too carelessly. This article shows exactly when @apply delivers real value, when it undermines the utility-first approach, and which clean alternatives avoid the architectural trade-off.

Anyone who works with Tailwind knows basic group-hover and peer-focus patterns. But once several levels are nested, several child states need to bubble upward, or a form needs to react to the state of a completely different element, the basics stop being enough. Named groups, group-has, peer-has and data attribute state chains solve exactly these advanced group and peer state combinations.

Anyone not using a mouse relies entirely on working keyboard navigation. Skip links, a logical focus order, and a clean focus trap in modals decide whether a Tailwind CSS application is usable or unusable for keyboard users.

Building a masonry layout with Tailwind CSS is easier than you might think: CSS columns solves 80% of cases without a single line of JavaScript. For the remaining 20%, row sorting, dynamic content and filtering, Alpine.js provides the logic you need without external dependencies.

Tailwind CSS v4 has switched its entire default color palette to OKLCH, by far the best color space for perceptually uniform, predictable color palettes on the web. This guide explains how OKLCH works, how to build your own palettes with it, and how Lightning CSS automatically ensures browser compatibility.

Removing focus rings for aesthetic reasons is one of the most common accessibility mistakes on the web. The CSS pseudo-class focus-visible and the identically named Tailwind CSS variant solve this dilemma: keyboard users see clear indicators, mouse users are not disturbed.

As soon as more than one product uses the same Tailwind design system, every change to tokens or components becomes a potential breaking change for someone else's code. Semantic versioning, a maintained changelog and clear deprecation periods turn a risky update into a planned, communicated step.

A well thought out design token system is the foundation of every scalable frontend project. With Tailwind CSS v4 and @theme, design tokens become CSS Custom Properties that are simultaneously available as Tailwind utilities, in CSS properties and in JavaScript, a true single source of truth for colors, typography, spacing and more.

Content configuration decides which files Tailwind CSS scans for used utility classes, and therefore directly controls bundle size, build time, and whether styles even reach production. Knowing the pitfalls with globs, monorepo symlinks, and dynamic class names saves hours of debugging missing utility classes on a live system.

The Oxide Compiler is the technical foundation of Tailwind CSS v4. Written in Rust, it fully replaces the previous JavaScript compiler and delivers dramatic build acceleration, with automatic file detection and a built-in CSS parser.