In November 2025, Hyvä Theme upgraded to version 1.4. Versions 1.4.0 and above improve and modernize Hyvä frontends, improve UI, and make HTML more reliable and powerful. Yet, Hyvä Theme 1.4+ brings several module compatibility issues due to changes in key structures.
Here, we’ll clarify the Hyvä 1.4 update changes and migration issues, as well as share Amasty developers’ strategy to address the release challenges.
Important: Many Hyvä Theme-compatible Amasty modules have been affected by the 1.4 update, but we’re doing our best to resolve the issue as quickly as possible. Our team has already fixed +15 modules, and is planning to adjust all our modules to 1.4.X by the end of March 2026.
Hyvä Theme 1.4 Key Changes
Replacing hyva-themes/magento2-reset-theme with hyva-themes/magento2-base-layout-reset to improve the TTFB for requests hitting a cold layout cache.
Easier styling with Tailwind v4 and Simplified Build Process.
Bfcache support to provide instant back-and-forth page loads.
Speculation Rules and View Transitions are now stable and fully integrated.
The new Snap Slider is now part of Hyvä and no longer exclusive to Hyvä UI.
New modals and off-canvases with the native HTML Dialog
Hyvä Theme 1.4 Tailwind v4 Compatibility Issues
In the 1.4 release, Hyvä switched to Tailwind CSS v4, integrated into the Hyvä UI library. Also, the 1.4 version simplifies the Node.js build process and introduces a custom bundle of Node scripts to simplify the default theme customization.
In practice, this means that Hyvä shifts configuration from a JavaScript file to a CSS-first approach using the @theme directive.
While the update simplifies the code, it greatly changes the syntax, causing compatibility issues for many Hyvä-compatible modules.
How to Address: As we’re taking care of all the Tailwind CSS v4 within Amasty modules, Hyvä Theme 1.4 Tailwind v4 compatibility doesn’t require any action on your side. If you’re migrating to Tailwind v4 in your own customizations, follow the official guidelines and the example below.
Migrating to Tailwind v4
The tailwind.config.js has been deprecated and replaced by the @theme directive. Yet, the tailwind.config.js should not be deleted to save the backwards compatibility.
The new @theme directive should be added to tailwind-source.css. The migration requires transforming the object from the tailwind.config.js into variables and adding them to @theme.
tailwind.config.js version:
module.exports = {
theme: {
extend: {
colors: {
amsl: {
google: {
lighter : '#0036FF',
'DEFAULT': '#004EC2'
}
}
},
transitionProperty: {
'amsl-social-button': 'box-shadow, background-color'
}
}
},
content: [
'../templates/**/*.phtml',
]
}
Tailwind v4 version with the @theme directive:
/* tailwind-source.css */
@import './components/buttons.css'; /* import example */
@theme {
--color-amsl-google-lighter: #0036FF;
--color-amsl-google: #004EC2;
--transition-amsl-social-button: box-shadow, background-color;
}
@theme can be moved to a separate file to import.
Updating the Path to @import
In the Hyvä 1.4 version, the path to file import starts with the relative path – for example, ./.
How it works:
@import 'components/some.css';
becomes
@import './components/buttons.css';
Replacing Deprecated and Renamed Utilities
To correctly change or replace utilities in Tailwind v4, use tables from Upgrade guide - Getting started. This guide contains tables with new utilities for the removed deprecated ones, as well as those that have been renamed.
Besides, you should also change the following utilities:
- !important becomes ! in the beginning of the style. For example, !w-full
- @screen should be replaced with media queries from Responsive Design - Tailwind CSS.
Content Purge
As tailwind.config.js configuration has been deprecated, there’s no possibility to point what files to parse. The default setting of Hyvä 1.4 parses all the phtml and xml files, but there are cases when styles are added in plugins. To make this work in Tailwind v4, you should safelist specific utilities you’re planning to use.
Example:
/* tailwind-source.css */
@source inline('text-gray-500');
Tailwind v4 and Adobe Cloud Deployments
Hyvä Theme 1.4 Tailwind v4 merging doesn’t work with .gitignore of the Adobe Cloud.
This can lead to compatibility issues with Tailwind v4's @source feature, as it ignores files listed in .gitignore.
How to Address: Hyvä Theme 1.4 Tailwind v4 incompatibility with Adobe Cloud is resolved via using a .gitignore file that explicitly lists the files and directories to be ignored, rather than ignoring everything and then un-ignoring. The Adobe Commerce Cloud Deployment guide recommends replacing .gitignore with a "deny-list" approach that explicitly lists files and directories to ignore, rather than ignoring everything by default. Use the standard Magento 2 .gitignore as a starting point.
