Tailwind: Guides and Practical Know-how | Page 3 | mironsoft Blog
Tailwind
-
Mar 20, 2026
Anyone who copies every icon as a full inline SVG into each phtml template in a Hyvä theme bloats the DOM unnecessarily and makes later changes to the icon set harder. SVG icon sprites solve this problem by defining every icon shape only once and reusing it across as many places in the theme as needed through a simple reference. This article shows how to build, optimize, generate and accessibly wire up SVG icon sprites in a Hyvä theme, including a concrete Node build script, an SVGO configuration and a reusable icon partial.
-
Mar 19, 2026
Anyone using modern frontend stacks with PhpStorm loses time to missing autocomplete configuration, failed CSS class completion, and Vite processes that aren't integrated into the IDE. The right settings reduce context switching between terminal, browser and editor to a minimum.
-
Mar 16, 2026
An image gallery needs a clean preview grid on every screen and a seamless transition into a fullscreen lightbox when an image is opened, without leaving keyboard users or people on slow connections behind. This pattern covers the full build with Tailwind CSS and Alpine.js: from the responsive grid through the zoom transition on open to arrow-key navigation and lazy loading for many images.
-
Mar 16, 2026
A freshly scaffolded Hyvä theme ships a CSS bundle of several megabytes in development mode, because Tailwind CSS deliberately does not purge in watch mode. The CSS purge step in the production build scans every phtml and Alpine.js file for class names actually in use and shrinks the stylesheet down to a few kilobytes, provided dynamic class names are handled correctly and the deploy sequence runs cleanly.
-
Mar 16, 2026
Email clients do not render modern CSS, Outlook still partly relies on the Word rendering engine, and Flexbox or Grid simply do not work reliably there. Applying Tailwind utility classes consistently to table layout still allows consistent, maintainable HTML email templates to be built, without starting from scratch for every newsletter.
-
Mar 16, 2026
Anyone using Tailwind CSS only for static styling is leaving significant potential on the table. The built-in animate utilities, configurable keyframes, and the transition system enable smooth, performant UI animations, without writing a single line of custom CSS. This article shows how it works.
-
Mar 10, 2026
With the aria-* modifiers in Tailwind CSS, ARIA attributes become the single source of truth for accessibility states, visually and semantically at once. No separate class management, no JavaScript for visual states, no drifting apart of ARIA state and CSS class.
-
Mar 7, 2026
A dashboard layout decides whether users understand within seconds where their key metrics live, or have to scroll for minutes. This article shows how to build a Tailwind CSS dashboard layout out of a sidebar, a stat card grid and flexible content areas that works equally well on desktop and mobile.
-
Mar 6, 2026
Implementing WAI-ARIA correctly for your own UI components costs weeks. Building Dialog, Dropdown, Tooltip and Select with correct keyboard navigation, focus trapping and screen reader support is more complex than most developers realize. Radix UI solves exactly this problem.
-
Mar 6, 2026
Form elements are among the hardest HTML elements to style. Browser defaults, platform-specific appearance and missing utility hooks turn checkboxes, select dropdowns and custom inputs into a constant challenge. The @tailwindcss/forms plugin solves this systematically.