The dialog element already brings backdrop, automatic focus trap, closing via the ESC key and form return values, without a single line of modal library code. With targeted CSS, including starting-style animations for smooth entry and exit, it becomes a fully styled, accessible modal.
1fr sounds like a simple, flexible share, but it does not behave the way it looks. Grid items carry an implicit minimum size that can be larger than their fr share, and that exact mechanism produces the overflow bug that makes minmax(0, 1fr) the real default, not just an optimization for edge cases.
The new CSS property field-sizing makes the well known JavaScript tricks for auto-growing textareas obsolete. With field-sizing: content, a form field adapts to its content starting from the very first keystroke, natively in the browser, with no event listener and no layout hacks.
The classic :valid and :invalid pseudo-classes fire as soon as a form field exists, often before the first keystroke. That leads to red borders around empty required fields right when the page loads. The newer :user-valid and :user-invalid pseudo-classes instead wait for real user interaction and solve this problem entirely without JavaScript.
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.
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.
Long product listings, faceted pages, and comment sections force the browser to lay out and paint thousands of elements even though only a fraction of them are visible. The CSS properties contain and content visibility give the rendering engine explicit context about which regions can be isolated and which can be skipped entirely, without causing layout shifts along the way.
Glassmorphism is more than a design trend, it is a stress test for CSS performance. backdrop-filter: blur() can turn into a GPU bottleneck on a mobile device if it is used carelessly. This article shows how to combine blur, saturate, and brightness correctly, where the performance limits sit, and what fallback strategies look like so the effect works in every browser.
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.
Webfonts are one of the most common causes of poor Core Web Vitals, especially high CLS (Cumulative Layout Shift) values. CSS font-display controls how and when a browser switches to a loaded font. With size-adjust, the visual jump caused by a font swap can be reduced to nearly zero.