DEV Community

Paboda Hettiarachchi
Paboda Hettiarachchi

Posted on

Add CSS on a custom module with Hyva

app/code/Vendor/Module/Observer/RegisterModuleForHyvaConfig

<?php
declare(strict_types=1);

namespace Vendor\Module\Observer;

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

class RegisterModuleForHyvaConfig implements ObserverInterface
{
    /**
     * RegisterModuleForHyvaConfig constructor
     *
     * @param ComponentRegistrar $componentRegistrar
     */
    public function __construct(
        private readonly ComponentRegistrar $componentRegistrar
    ) {
    }

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

        $moduleName = implode('_', array_slice(explode('\\', __CLASS__), 0, 2));

        $path = $this->componentRegistrar->getPath(ComponentRegistrar::MODULE, $moduleName);

        $extensions[] = ['src' => substr($path, strlen(BP) + 1)];

        $config->setData('extensions', $extensions);
    }
}
Enter fullscreen mode Exit fullscreen mode

app/code/Vendor/Module/etc/frontend/events.xml

<?xml version="1.0"?>
<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="Vendor_Module" instance="Vendor\Module\Observer\RegisterModuleForHyvaConfig"/>
    </event>
</config>
Enter fullscreen mode Exit fullscreen mode

app/code/Vendor/Module/view/frontend/tailwind/components/category-widgets.css

.category-nav-ul {
    ul.level3 {
        > li {
            @apply border-l-2 border-gray-300 hover:border-blue-700;
            a {
                @apply block py-2.5 pl-4 text-slate-600 hover:text-blue-700;
            }
        }
    }
    > li {
        > a.level3, > a.level4 {
            @apply py-2.5 block text-slate-600 hover:text-blue-700;
        }
        > a.level4 {
            @apply border-l-2 pl-4 border-gray-300 hover:border-blue-700;
        }
    }
}
Enter fullscreen mode Exit fullscreen mode

app/code/Vendor/Module/view/frontend/tailwind/tailwind.config.js

module.exports = {
    content: [
        '../templates/**/*.phtml',
    ]
}
Enter fullscreen mode Exit fullscreen mode

app/code/Vendor/Module/view/frontend/tailwind/tailwind-source.css

@import "components/category-widgets.css";
Enter fullscreen mode Exit fullscreen mode

Heroku

This site is built on Heroku

Join the ranks of developers at Salesforce, Airbase, DEV, and more who deploy their mission critical applications on Heroku. Sign up today and launch your first app!

Get Started

Top comments (0)

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay