Configuring Tailwind for Hyvä Theme

In order to ensure the seamless integration of Hyvä theme, it is imperative to fine-tune the Tailwind Purge settings. To accomplish this, follow the outlined steps below:

1. Adjust the Tailwind Purge settings to optimize compatibility.
2. Execute the following steps to ensure a smooth integration of Hyvä theme.

First, you will need to install all required node packages.

cd /path/to/project/app/design/frontend/vendor/theme/web/tailwind/ 
 npm install

Recommended Node.js Version

We advise utilizing Node.js version 16 or a more recent release. 

Depending on the Hyvä release, the minimum required versions are as follows: Hyvä 1.2.x necessitates Node.js 14.0.0, while Hyvä 1.1.x requires Node.js 12.13.0. 

For the minimum Node.js version required by any Tailwind CSS release, refer to the engines.node section in the tailwindCSS packages.json file.

Tailwind Purge Content settings

The standard size for a Hyvä Theme stylesheet is approximately 100kb, which translates to roughly 17kb when transmitted over the network with HTTP compression.

This efficiency is achieved because Tailwind selectively compiles only the CSS that is actively utilized within a theme.

To facilitate this, the build script must be directed to the specific directories housing the .phtml files. Typically, this would be located at app/design/frontend/vendor/theme/templates/.

If your .phtml files containing TailwindCSS classes are dispersed in app/code or vendor/, these directories must also be incorporated into your tailwind configuration.

New to Hyvä?? Learn about the Hyvä Theme from scratch!

Hyvä 1.1.14 and newer

Hyvä 1.1.15

Starting from release 1.1.15 of the hyva-themes/magento2-theme-module, the file app/etc/hyva-themes.json is employed to automatically integrate pertinent modules into the configuration for purging content paths. 

This file is regenerated automatically each time a module is enabled or disabled.

If needed, it can also be manually generated using the command…

bin/magento hyva:config:generate

Once a module is added to the list, its templates will be automatically scanned for Tailwind CSS classes.

Hyvä 1.1.14

Starting from release 1.1.14 of the hyva-themes/magento2-theme-module, the file app/etc/hyva-themes.json is utilized to automatically integrate pertinent modules into the purge content paths configuration. 

The configuration file needs to be regenerated each time a Hyvä compatibility module is installed or removed.

bin/magento hyva:config:generate

Once a module is added to the list, its templates will be automatically scanned for Tailwind CSS classes.

Hyvä 1.1.13 and before

Themes preceding Hyvä release 1.1.13 need to guarantee the discovery of all classes by manually incorporating all pertinent paths into the theme’s purge content configuration. 

Alternatively, we suggest updating the hyva-themes/magento2-theme-module to version 1.1.14 or later and leveraging the automated Tailwind purge content configuration merging.

In the absence of an upgrade, include the module paths manually in the theme’s purge content configuration, as elaborated below in the Purge Content Details section.

Purge Content Details

The purging configuration is located in your theme’s tailwind.config.js file. For instance, you can find it at app/design/frontend/vendor/theme/web/tailwind/tailwind.config.js.

Tailwind v2 vs. v3

The content settings structure underwent changes with Tailwind v3. Subsequently, the content property is now specified at the top level of the module.exports. The purge property is no longer applicable. For comprehensive details, refer to the Tailwind v3 documentation.

Exercise caution and ensure awareness of the Tailwind version implemented in your theme while making configuration adjustments.

Please note that the configuration is not restricted solely to .phtml templates. For instance, layout XML files might also reference Tailwind CSS classes and can be included in the content configuration.

Tailwind v2 purge config example

module.exports = {
  ...
  purge: {
    content: [
      // this theme's phtml files
      '../../**/*.phtml',
      // parent theme in vendor/
      '../../../../../../../vendor/hyva-themes/magento2-default-theme/**/*.phtml',
      // hyva theme-module templates (only necessary for Hyva themes before 1.1.15)
      '../../../../../../../vendor/hyva-themes/magento2-theme-module/src/view/frontend/templates/**/*.phtml',
      // app/code phtml files (if you need tailwind classes from app/code modules)
      //'../../../../../../../app/code/**/*.phtml',
      // react app src files (if Hyvä Checkout is installed in app/code)
      //'../../../../../../../app/code/**/src/**/*.jsx',
      // react app src files in vendor (If Hyvä Checkout is installed in vendor)
      //'../../../../../../../vendor/hyva-themes/magento2-hyva-react-checkout/src/reactapp/src/**/*.jsx',
      //'../../../../../../../vendor/hyva-themes/magento2-hyva-react-checkout/src/view/frontend/templates/react-container.phtml',
      // widget block classes from app/code
      //'../../../../../../../app/code/**/Block/Widget/**/*.php'
    ]
  }
}

Tailwind v3 config example

 module.exports = { 
...
  content: [
    // this theme's phtml files
    '../../**/*.phtml',
    // parent theme in vendor/
    '../../../../../../../vendor/hyva-themes/magento2-default-theme/**/*.phtml',
    // hyva theme-module templates
    '../../../../../../../vendor/hyva-themes/magento2-theme-module/src/view/frontend/templates/**/*.phtml',
  ]
}

Generating CSS during development

You can generate the styles using below command

cd /path/to/project/app/design/frontend/Aureatelabs/hyva/web/tailwind/
npm run watch

Generating CSS for production

First, you will need to install all required node packages. 

You can generate the styles using the below command:

cd /path/to/project/app/design/frontend/Aureatelabs/hyva/web/tailwind/
npm run build-prod

Initiating this command activates the continuous operation of the Tailwind compiler. Any CSS classes incorporated into templates within the specified purge configuration will promptly be appended to the styles.css file.

Example:

<button class="inline-flex justify-center rounded-lg text-sm font-semibold py-3 px-4 btn-primary text-white hover:bg-slate-700">
   Buy Hyvä themes
</button>

Please flush the Magento cache & check it.

php bin/magento cache:flush

Check Output :

That’s it !!

More resources on Hyva themes:

1. Check out the InstaBuild for Hyvä Themes: Ready-made Hyva theme templates for faster storefront development!
2. Hyva Themes Development – For Online Merchants
3. Hyvä Theme Benefits that your store needs
4. 10 Best Hyva Compatibility Extension Providers For Magento 2 Stores
5. Hyvä VS PWA: Where to Invest?
6. How a Slow Magento Website Can Cost You Advertising Dollars
7. Mobile Commerce: How Hyva Themes Boost Mobile Conversions

Stay tuned for more insightful articles on Magento and web development best practices.