Page 11 - Tailwind

A data table with hundreds of rows decides the productivity of an entire team. Building Tailwind CSS data tables without zebra pattern, sticky header and clear sort indicators forces users to count rows with their finger on the screen. This article shows concrete styling patterns for data tables that stay scannable even with large amounts of data.

Anyone who needs to generate invoices as PDF from a PHP application without a Node.js dependency almost always ends up with Dompdf or wkhtmltopdf. Both libraries only support a subset of the CSS features that a Tailwind template uses in the browser, which is why invoice layouts must be deliberately built on tables instead of flexbox.

Tailwind CSS v4 brings a new compiler, CSS-first configuration, OKLCH colors and improved variants. This cheatsheet covers all key classes and new concepts, as a fast reference for everyday development.

Building dark mode support for text and surfaces with Tailwind's dark: variant is usually quick, but icons and especially complex illustrations pose their own problem. A simple CSS filter inversion turns a multi-colored illustration into an unreadable mess of colors, because inversion flips every color independently of its original meaning. Working deliberately with dark: variants at the SVG level instead keeps full control over fill, stroke and contrast in both modes.

When content should only reach screen readers and stay visually hidden, the instinctive reach is display:none. That removes text from the accessibility tree entirely. Tailwind's sr-only utility solves exactly this problem: visually invisible, fully readable for assistive technology. This article shows how sr-only works under the hood and where it makes the difference in real projects.

Tailwind CSS 4 retires the JavaScript configuration file in favor of a fully CSS-first approach. For Hyva Theme developers on Magento 2 this means design tokens, custom utilities and theme overrides now live directly inside the CSS file, more transparent, easier to maintain and closer to the browser standard.

Symfony 7 makes Webpack Encore optional: AssetMapper manages JavaScript imports natively through importmap, and the Tailwind CSS Standalone CLI processes CSS without npm. The result is a modern frontend setup that needs no Node.js in the production build, simpler to deploy and simpler to maintain.

Tailwind CSS v4 puts an end to JavaScript configuration files. The CSS-First approach makes it possible to define colors, fonts, spacing and custom design tokens directly in CSS with the @theme directive, closer to the platform, faster to build and easier to understand.

A form that only looks good visually but stays silent for screen readers costs users and revenue. Accessible forms with Tailwind CSS connect labels correctly, link error messages via aria-describedby, and group related fields with fieldset and legend.

A command palette has become close to a standard feature in developer tools and increasingly shows up in ordinary web applications too: a keystroke opens a centered search field that filters commands, pages or records and can be navigated with the arrow keys. Behind this seemingly simple pattern sit a number of detail problems: correct overlay positioning, a clearly recognizable active entry, groups with their own headings, and a visual highlight for fuzzy search matches. This article shows how to implement all of that cleanly and maintainably with plain Tailwind CSS plus a bit of Alpine.js for state management.