Page 10 - Tailwind

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.

TipTap builds on ProseMirror and deliberately ships without any visual styling of its own, only the editable structure and the commands for formatting. The entire look, from the running text inside the editor to the toolbar buttons to the final rendering of saved content, comes exclusively from custom CSS. The @tailwindcss/typography prose class provides a solid starting point for that, but it needs targeted adjustments so the editor view and the render view genuinely look consistent.

An admin sidebar has to fit a lot of navigation items, disappear on small screens, and still make it obvious where the user currently is. This pattern walks through the full build with Tailwind CSS and Alpine.js: from the icon-only state through nested submenus to an off-canvas menu on phones, without pulling in any extra JavaScript library.

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.

The Hyvä Tailwind config is the central control point for colors, fonts, spacing and plugins in a Magento 2 frontend, but it also decides whether Tailwind actually finds every used class in the built CSS or whether styles suddenly go missing on the storefront. This article shows how a child theme like Mironsoft/default extends the tailwind.config.js of the Hyvä parent theme via require() and object spread, how theme.extend picks up custom design tokens for colors, fonts and spacing, how plugins like Typography, Forms and Aspect Ratio get registered, and how content paths are configured so Tailwind reliably scans every phtml, JS and Alpine file in the theme and in Hyvä modules.

Professional print layouts without maintaining a separate print stylesheet: the print variant of Tailwind CSS enables fully print-specific utility classes directly in the template. Hide navigation elements, adjust colors for print, control page breaks and output URLs in the print layout, all with Tailwind CSS Print Styles.

Class names originating from a headless CMS field, an MDX file, or an npm component library often sit outside the reach of the Tailwind scanner. Anyone who does not understand why content scanning fails right there loses time chasing mysteriously missing CSS, even though the class is visibly sitting in the markup.

Star ratings look like a trivial component at first glance, but once half stars, an interactive input with a hover preview, and an accessible implementation are all required at the same time, there are more detail problems hiding inside than expected. This article shows how to cleanly implement both the read-only display of an average rating and the editable input variant with Tailwind CSS, including precise rendering of half stars and an accessibility approach that does not rely on visual stars alone.