Skip to content

Registering a Module for Tailwind Compilation

The app/etc/hyva-themes.json file tells @hyva-themes/hyva-modules which installed modules to scan for Tailwind configuration and CSS during compilation. If your module ships its own Tailwind styles or config, you need to register it here so everything gets picked up automatically.

Example of a generated hyva-themes.json file
{
    "extensions": [
        {
            "src": "app/code/My/Module"
        },
        {
            "src": "vendor/Acme/Anvil/src"
        }
    ]
}

The file is generated automatically by the command

bin/magento hyva:config:generate

It is also automatically regenerated by most commands that modify the app/etc/config.php file.
See Tailwind Purge Settings for details.

Declaring the Event Observer

To register your module in hyva-themes.json, declare an event observer for the hyva_config_generate_before event in your module's etc/frontend/events.xml file.

etc/frontend/events.xml
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
        xsi:noNamespaceSchemaLocation="urn:magento:framework:Event/etc/events.xsd"
>
    <event name="hyva_config_generate_before">
        <observer
            name="My_Module_Register_Hyva_Config"
            instance="My\Module\Observer\RegisterModuleForHyvaConfig"
        />
    </event>
</config>

Implementing the Observer

The observer receives a configuration object that represents the data structure written to the JSON file. Your observer needs to add the module path (relative to the Magento root directory) to the extensions[].src array.

Observer/RegisterModuleForHyvaConfig.php
<?php

declare(strict_types=1);

namespace My\Module\Observer;

use Magento\Framework\Component\ComponentRegistrar;
use Magento\Framework\Event\Observer;
use Magento\Framework\Event\ObserverInterface;

class RegisterModuleForHyvaConfig implements ObserverInterface
{
    private ComponentRegistrar $componentRegistrar;

    public function __construct(ComponentRegistrar $componentRegistrar)
    {
        $this->componentRegistrar = $componentRegistrar;
    }

    public function execute(Observer $event)
    {
        $config = $event->getData('config');
        $extensions = $config->hasData('extensions') ? $config->getData('extensions') : [];

        // Resolve the full filesystem path for this module
        $path = $this->componentRegistrar->getPath(ComponentRegistrar::MODULE, 'My_Module');

        // Only use the path relative to the Magento base dir
        $extensions[] = ['src' => substr($path, strlen(BP) + 1)];

        $config->setData('extensions', $extensions);
    }
}

Compatibility modules are registered automatically

Compatibility modules that use automatic template overrides via the CompatModuleRegistry don't need this step - they're registered for Tailwind compilation automatically.