Page 9 - Tailwind

Tailwind CSS and Bootstrap 5 follow fundamentally different philosophies. Which one fits your project, team and maintenance budget? This comparison shows the real differences, no marketing, with concrete code side by sides.

Svelte compiles components away instead of interpreting them at runtime, and this exact principle carries over to styling once Tailwind CSS is wired up correctly through Vite. This article covers the setup in SvelteKit, how scoped styles and utility classes work together, reactive statements for class logic and the server-side rendering pitfalls that occur particularly often with SvelteKit.

Classic CSS custom properties are plain strings with no type, which is why the browser can't animate them even when the value looks like a number or an angle. The @property rule lets you register custom properties with a genuine syntax type, an inheritance behavior, and an initial value instead, which suddenly makes them animatable. This article covers how to combine @property meaningfully with Tailwind CSS, including a practical example animating a gradient angle rotation.

@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.

A list with several thousand rows brings any browser to its knees once every row is its own DOM node carrying Tailwind classes for padding, borders, and hover states. Virtualization fixes this by rendering only the currently visible rows, but it introduces its own styling challenges, from variable item heights to keeping sticky section headers working inside the virtualized list.