Page 13 - Tailwind

shadcn/ui is not a library in the classic sense, it is a catalog of copy-paste components built on Radix UI. Anyone who understands the copy-paste model can build a fully controllable, themeable component library for their own design system on top of it.

htmx brings AJAX, swap transitions and server-side rendering back into simple HTML attributes, and Tailwind CSS supplies the matching utility-first styling without a separate frontend build. This article shows how loading states, transitions between swaps and dynamically loaded fragments get styled consistently, without needing a complete JavaScript framework.

A theme switch that simply swaps a class is technically correct but feels abrupt. With the View Transitions API, color variables registered through @property, and a slim Alpine.js store, the same switch becomes a soft cross fade in Tailwind CSS v4, without adding a separate JavaScript library.

Astro ships no JavaScript by default and renders pages as static HTML, and Tailwind CSS brings a utility system that fits exactly that architecture. Combining Tailwind CSS with Astro gives you small CSS bundles, clearly bounded interactive islands and a build that almost optimizes itself once you understand the islands architecture properly.

Tailwind CSS v4 brings a fundamental shift: configuration now happens in CSS instead of a JavaScript file. For Symfony projects with Twig templates, that changes the entire setup process and, with Vite as the asset pipeline and the new Oxide engine, it brings noticeably faster build times.

Tailwind CSS tempts you into duplicating class strings in every template. A cleanly structured Tailwind component library with @layer components, CVA for variants, and design tokens as the single source of truth solves this problem for good, without giving up the benefits of utility-first.

Tailwind's JIT engine generates only the utility classes that actually appear in your source code, yet misconfigured content paths regularly cause CSS bundles to bloat unnecessarily or styles to vanish in production, because the scanner simply overlooks templates, modules, or dynamically assembled class names.

A separate Tailwind build for every white-label customer scales poorly once a hundred tenants want to use the same application with their own color scheme. With a single CSS bundle and server side injected CSS variables based on the hostname, white-label theming without a rebuild per brand becomes possible, directly on top of Tailwind CSS v4 design tokens.

CMS blocks in Magento are edited by content editors in the WYSIWYG, not by developers in phtml files. Without fixed Hyvä CMS block styling conventions, inconsistent layouts appear, along with broken utility classes the Tailwind JIT compiler never generated, and CSP violations from inline styles. A small, documented class set solves this problem for good.

Shadow DOM encapsulates styles so completely by default that global Tailwind CSS never reaches a Web Component in the first place. With Constructable Stylesheets, adoptedStyleSheets and the ::part selector, this encapsulation can be opened up deliberately without giving up Shadow DOM's isolation guarantees. This article shows concrete patterns for Custom Elements that use Tailwind CSS consistently without shipping their CSS multiple times.