Prerequisites

Before starting, ensure you have:

• A Magento 2 instance with the Hyvä theme installed.
• Node.js and npm installed for Tailwind CSS setup.
• Access to the Hyva/default theme in your project (installed via composer).

Table of contents

1. Create the Hyvä child theme
2. Copy the web directory
3. Configure the Tailwind config file
4. Generating CSS during development

Step 1: Create the Hyvä child theme

1. Create the directory structure:

Create a new directory for your child theme:

• Path: app/design/frontend/MyCompany/child

2. Add the theme.xml and registration.php files:

Define the child theme and set its parent to Hyva/default: app/design/frontend/MyCompany/child/theme.xml

<theme xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
       xsi:noNamespaceSchemaLocation="urn:magento:framework:Config/etc/theme.xsd">
    <title>MyCompany Hyva/child</title>
    <parent>Hyva/default</parent> 
</theme>

Register the child theme with Magento: app/design/frontend/MyCompany/child/registration.php

<?php
use Magento\Framework\Component\ComponentRegistrar;
ComponentRegistrar::register(
    ComponentRegistrar::THEME,
    'frontend/MyCompany/child',
    __DIR__
);

3. Enable the theme in Magento:

Flush the Magento cache to activate the MyCompany/child theme:

bin/magento cache:flush

4. Verify and set the child theme:

Navigate to the Magento Admin panel and check if the child theme is listed under Content > Design > Themes. Then, go to Content > Design > Configuration and set ’MyCompany Hyva/child’ as the theme for your store.

Step 2: Copy the web directory

Copy the web directory from the parent theme to the child theme.

• Source: vendor/hyva-themes/magento2-default-theme/web/
• Destination: app/design/frontend/MyCompany/child/web/

Step 3: Configure the Tailwind config file

Update the tailwind.config.js file in the child theme to customize Tailwind CSS settings: app/design/frontend/MyCompany/child/web/tailwind/tailwind.config.js

module.exports = {
  ...
  // keep the original settings from tailwind.config.js
  // only add the path below to the purge > content settings
  ...
  content: [
    // this theme's phtml and layout XML files
    '../../**/*.phtml',
    '../../*/layout/*.xml',
    '../../*/page_layout/override/base/*.xml',
    // parent theme in Vendor (if this is a child-theme)
    '../../../../../../../vendor/hyva-themes/magento2-default-theme/**/*.phtml', 
    '../../../../../../../vendor/hyva-themes/magento2-default-theme/*/layout/*.xml', 
    '../../../../../../../vendor/hyva-themes/magento2-default-theme/*/page_layout/override/base/*.xml', 
    // app/code phtml files (if need tailwind classes from app/code modules)
    '../../../../../../../app/code/**/*.phtml', 
  ]
}
...

Tailwind scans .phtml and .xml files for utility classes. Ensure these paths match your project structure to include all necessary files.

Step 4: Generating CSS during development

Hyvä integrates Tailwind CSS into the Magento frontend workflow. To dynamically generate and watch for CSS changes:

1. Install the required packages:

Navigate to your child theme directory and install dependencies:

cd app/design/frontend/MyCompany/child/web/tailwind
npm install

2. Generating CSS during development

Run the following command to watch for changes and automatically regenerate the CSS:

cd app/design/frontend/MyCompany/child/web/tailwind
npm run watch

This command watches for changes in your .phtml and .xml files and regenerates the CSS output: app/design/frontend/MyCompany/child/web/css/styles.css

3. Generating CSS for production

To generate minified CSS for production, run the following command:

cd app/design/frontend/MyCompany/child/web/tailwind
npm run build-prod

This command creates a minified CSS file for optimal performance in production.

Summary

By following these steps, you can create and customize your Hyvä child theme:

1. Created the child theme directory with theme.xml and registration.php.
2. Set the parent theme to Hyva/default.
3. Copied the web directory to inherit assets like Tailwind CSS and JavaScript.
4. Configured the tailwind.config.js file for customization.
5. Set up CSS generation during development and production.

With this setup, you can now fully customize your Hyvä child theme to match your project requirements and enhance the user interface.

Happy theming! 🎉