{"id":26391,"date":"2026-05-18T10:16:04","date_gmt":"2026-05-18T04:46:04","guid":{"rendered":"https:\/\/meetanshi.com\/blog\/?p=26391"},"modified":"2026-05-18T10:16:04","modified_gmt":"2026-05-18T04:46:04","slug":"guide-to-hyva-theme-upgrade-helper-tool","status":"publish","type":"post","link":"https:\/\/meetanshi.com\/blog\/guide-to-hyva-theme-upgrade-helper-tool\/","title":{"rendered":"Guide to Hyv\u00e4 Theme Upgrade Helper Tool"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">Upgrading a Magento 2 store with Hyv\u00e4 Themes can sometimes feel difficult, especially when major frontend technologies like Tailwind CSS or Alpine.js change versions.&nbsp;<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Updating files manually takes time and also increases the chances of mistakes.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">To simplify this process, Hyv\u00e4 provides a package called hyva-themes\/upgrade-helper-tools. It includes several command-line scripts that help developers automate theme upgrades and reduce manual work.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">In this blog, we will explore how the Hyv\u00e4 theme upgrade helper tool works and how to use it.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">What Are Hyv\u00e4 Upgrade Helper Tools?<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">The hyva-themes\/upgrade-helper-tools package is a set of scripts designed to help developers upgrade custom Hyv\u00e4 themes more easily.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">These tools help with:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Tailwind CSS upgrades<\/li>\n\n\n\n<li>Alpine.js migrations<\/li>\n\n\n\n<li>Finding deprecated classes<\/li>\n\n\n\n<li>Updating theme configuration files<\/li>\n\n\n\n<li>Reducing manual code changes<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Instead of checking every file one by one, the scripts automate most of the upgrade work.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Important Note Before Using the Tools<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">These scripts should only be used in a development environment.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Do not run them directly on a live production server.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Before deploying changes:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Review all updated files properly<\/li>\n\n\n\n<li>Test the frontend carefully<\/li>\n\n\n\n<li>Commit changes to version control<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">This helps avoid unexpected issues on the live website.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Install the Hyv\u00e4 Upgrade Helper Tools<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">You can install the package using Composer.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Run the following command from your Magento root directory:<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">composer require --dev hyva-themes\/upgrade-helper-tools:dev-main<\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">You can also install it globally using Composer if needed.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Upgrading Tailwind from CSS v3 to v4<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">If you are upgrading to Hyv\u00e4 1.4.0 or later, you also need to migrate Tailwind CSS from version 3 to version 4.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Hyv\u00e4 provides a simple wrapper script that runs all required upgrade steps automatically.<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">.\/vendor\/bin\/update-to-tailwind-v4.js &lt;path-to-your-theme><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">This command handles most of the migration work for you.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">The wrapper script actually runs multiple scripts internally. You can also run them separately if you want better control over the upgrade process.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Step 1: Update Tailwind Core Files<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">This script:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Creates a backup of your current Tailwind folder<\/li>\n\n\n\n<li>Copies the latest Tailwind v4 structure into your theme<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Command:<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">.\/vendor\/bin\/convert-to-tailwind-v4.js &lt;path-to-your-theme><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">This helps prepare your theme for Tailwind v4 compatibility.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Step 2: Convert Tailwind Configuration<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">In Tailwind CSS v4, configuration handling changed significantly.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Earlier versions used:<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">tailwind.config.js<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Now Tailwind v4 mainly uses CSS variables.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">This script converts your old configuration automatically.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Command:<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">.\/vendor\/bin\/convert-tailwind-config.js &lt;path-to-your-tailwind.config.js> &lt;path-to-your-theme\/web\/tailwind><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">After running the command, a new CSS configuration file is generated.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">You will then need to manually import it into:<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">tailwind-source.css<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Step 3: Find Deprecated Tailwind Classes<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Tailwind v4 removes or renames several old utility classes.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">For example:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>bg-opacity-25<\/li>\n\n\n\n<li>flex-grow<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">This script scans your theme files and generates a report showing deprecated classes and their locations.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Command:<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">.\/vendor\/bin\/find-deprecated-classes.js &lt;directory-to-scan><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">After execution, you will get a detailed report file named:<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">tailwind-deprecated-report.md<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">This makes it much easier to identify outdated code.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Example: Running the Tailwind v4 Upgrade<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Suppose your custom theme is located at:<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">app\/design\/frontend\/Custom\/theme<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">You can run:<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">.\/vendor\/bin\/update-to-tailwind-v4.js app\/design\/frontend\/Custom\/theme<\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">This command will:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Update Tailwind structure files<\/li>\n\n\n\n<li>Convert configuration<\/li>\n\n\n\n<li>Prepare your theme for Tailwind v4<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">After that, you can review the deprecated classes report and update the remaining code.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Other Useful Upgrade Scripts<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">The package also includes tools for older migrations and additional Hyv\u00e4 components.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Hyv\u00e4 CMS Migration Script<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Used for updating CMS component configuration files.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">.\/bin\/hyva-cms-0.6.0-migrate-children-field.js [path\/to\/components.json]<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Alpine.js CSP Helper<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Helps update Content Security Policy settings during Alpine.js upgrades.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">.\/bin\/hyva-csp-helper [&#8230;DIRECTORY] | tee CSP-migration.md<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Legacy Tailwind &amp; Alpine Migration Tool used for upgrading:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Tailwind CSS v2 to v3<\/li>\n\n\n\n<li>Alpine.js v2 to v3<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">.\/bin\/hyva-1.2.0-tailwind-and-alpine.js &lt;directory-to-scan&gt;<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Conclusion&nbsp;<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">The hyva-themes\/upgrade-helper-tools package simplifies and speeds up Hyv\u00e4 theme upgrades. Instead of manually updating many files, developers can use automated scripts to handle most of the work. It also helps make Tailwind CSS and Alpine.js upgrades easier to manage.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">These tools save development time and help keep Magento 2 stores updated with the latest frontend standards.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">However, real store upgrades still require careful handling, as custom themes, third-party modules, and frontend changes can sometimes cause design or functionality issues during migration.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">At <a href=\"https:\/\/meetanshi.com\/contact-us.html\">Meetanshi<\/a>, we regularly help Magento store owners upgrade and optimize Hyv\u00e4-based websites with minimal disruption. From Tailwind and Alpine.js migrations to custom frontend fixes and performance improvements, our Hyv\u00e4 experts handle the complete upgrade process smoothly.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Upgrading a Magento 2 store with Hyv\u00e4 Themes can sometimes feel difficult, especially when major frontend technologies like Tailwind CSS or Alpine.js change versions.&nbsp; Updating&#8230;<\/p>\n","protected":false},"author":5,"featured_media":0,"comment_status":"closed","ping_status":"","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[34,5869],"tags":[],"class_list":["post-26391","post","type-post","status-publish","format-standard","hentry","category-magento","category-hyva-themes"],"acf":[],"_links":{"self":[{"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/posts\/26391","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/users\/5"}],"replies":[{"embeddable":true,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/comments?post=26391"}],"version-history":[{"count":4,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/posts\/26391\/revisions"}],"predecessor-version":[{"id":26395,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/posts\/26391\/revisions\/26395"}],"wp:attachment":[{"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/media?parent=26391"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/categories?post=26391"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/tags?post=26391"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}