Page 16 - Tailwind

Anyone who still ships product images and CMS assets only as JPEG or PNG is giving away load time and Core Web Vitals points on every page view. An automated WebP conversion in the build and deploy process generates a much smaller WebP variant for every image, serves it through the picture element with a clean fallback, and integrates fully into an existing Hyvä deploy sequence without ever putting the storefront at risk if a conversion fails.

A typography scale system defines every font size in a project through a fixed mathematical ratio instead of arbitrarily chosen pixel values. Combined with CSS Custom Properties and clamp(), this becomes a single system of semantic tokens that computes responsive sizes automatically and stays consistent across the entire design system.

A tooltip that only appears on mouse movement stays invisible to keyboard users and screen readers. Accessible tooltips with Tailwind CSS connect supplementary information via aria-describedby, respond to hover and focus alike, and close reliably with Escape.

With Tailwind v4, native CSS nesting officially enters the workflow through the new Rust-based engine. Developers coming from years of Sass nesting need to adjust a few habits, but gain a technique that runs directly in the browser with no preprocessor at all.

A working hot reload loop decides in daily Hyvä work whether a layout change becomes visible within seconds or only after a manual deploy cycle. The Hyvä watcher runs in the background of the Docker container, watches phtml, CSS and JS files through a bind mount, and automatically triggers a Tailwind rebuild plus regeneration of the view_preprocessed directory on every change, without setup:static-content:deploy. Anyone who understands the mechanics behind it, sets the correct inotify limits and can check the watcher status cleanly saves hours every day compared to the classic production build cycle.

Responsive classes in Tailwind CSS not applying? The layout breaks at a certain breakpoint, but you can't tell why? This tutorial explains how to make active breakpoints visible, recognize common mobile-first pitfalls, and systematically debug responsive layouts, without hours of DevTools detective work.

dnd-kit takes over the complex logic behind drag-and-drop, collision detection, keyboard control, and sensor management, but deliberately ships without any styles of its own. All visual communication, which element is currently being dragged, where it can land, and where the gap for the drop will appear, remains the job of CSS and Tailwind. Anyone who cleanly separates these three states and drives them through dnd-kit's data attributes ends up with a drag-and-drop experience that feels fluid and always shows the user clearly what is happening.

Icons are omnipresent in every UI, and yet they are frequently used incorrectly. Too large, wrong color, not accessible, shipped as PNG instead of SVG. This guide shows how to use Heroicons, Phosphor Icons and inline SVG with Tailwind CSS v4 correctly and performantly.

A good Kanban board lives on clear column boundaries, readable cards and visible feedback while dragging. With Tailwind CSS for layout and states plus Alpine.js for drag-and-drop interaction, a board emerges that stays organized even with many cards and columns.

Filter utilities like blur, brightness and grayscale look like cosmetic tricks at first glance, but in Tailwind they solve a technically demanding problem: composing multiple filter functions into a single CSS declaration. Understanding how that composition works, and where backdrop filters hit their limits, lets you build effects that stay smooth even on mobile devices.