Hello Magento Friends,
Magento 2’s Hyvä theme breaks boundaries on frontend performance by utilizing limited JavaScript, as well as using Tailwind’s utility-first CSS framework. You can simply extend Tailwind in the Hyvä theme with your own classes.
This blog details how to implement Tailwind CSS into Hyvä for inline customization of the look and feel of your store without performance loss.
What is Tailwind CSS?
Tailwind CSS is a utility-first CSS framework that allows you to operate your components through the use of low-level utility classes. It is fast, flexible and the backbone of the Hyvä design system.
Steps to Extend Tailwind CSS with Custom Classes in Hyvä Theme for Magento 2:
Step 1: Create an events.xml file at the given path
app/code/Vendor/Extension/etc/frontend/events.xml
Now add the code as follows:
<?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="observer_name" instance="Vendor\Extension\Observer\Registermoduleforhyvaconfig"/>
</event>
</config>Step 2: Create a Registermoduleforhyvaconfig.php file at the given path
app/code/Vendor/Extension/Observer/Registermoduleforhyvaconfig.php
Now add the code as follows:
<?php
declare(strict_types=1);
namespace Vendor\Extension\Observer;
use Magento\Framework\Component\ComponentRegistrar;
use Magento\Framework\Event\Observer;
use Magento\Framework\Event\ObserverInterface;
class Registermoduleforhyvaconfig implements ObserverInterface
{
/**
* @var ComponentRegistrar
*/
private $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') : [];
$moduleName = implode('_', array_slice(explode('\\', __CLASS__), 0, 2));
$path = $this->componentRegistrar->getPath(ComponentRegistrar::MODULE, $moduleName);
// Only use the path relative to the Magento base dir
$extensions[] = ['src' => substr($path, strlen(BP) + 1)];
$config->setData('extensions', $extensions);
}
}Step 3: Create a tailwind.config.js file at the given path
app/code/Vendor/Extension/view/frontend/tailwind/tailwind.config.js
Now add the code as follows:
module.exports = {
content: [
'../templates/**/*.phtml',
],
safelist: [
'bg-btncolor',
],
theme: {
extend: {
backgroundColor: {
'btncolor' : '#0f9cc7',
},
}
}
}Step 4: Create a hyva_catalog_product_view.xml file at the given path
app/code/Vendor/Extension/view/frontend/layout/hyva_catalog_product_view.xml
Now add the code as follows:
<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="../../../../../../../lib/internal/Magento/Framework/View/Layout/etc/page_configuration.xsd">
<update handle="hyva_modal"/>
<body>
<referenceBlock name="product.info.addtocart">
<action method="setTemplate">
<argument name="template" xsi:type="string">Vendor_Extension::hyva/addtocart.phtml</argument>
</action>
</referenceBlock>
</body>
</page>Step 5: Create an addtocart.phtml file at the given path
app/code/Vendor/Extension/view/frontend/templates/addtocart.phtml
Now add the code as follows:
<?php
/**
* Hyvä Themes - https://hyva.io
* Copyright © Hyvä Themes 2020-present. All rights reserved.
* This product is licensed per Magento install
* See https://hyva.io/license
*/
declare(strict_types=1);
use Hyva\Theme\Model\ViewModelRegistry;
use Hyva\Theme\ViewModel\HeroiconsOutline;
use Magento\Framework\Escaper;
use Magento\Framework\View\Element\Template;
/** @var Template $block */
/** @var Escaper $escaper */
/** @var ViewModelRegistry $viewModels */
/** @var HeroiconsOutline $heroicons */
$heroicons = $viewModels->require(HeroiconsOutline::class);
?>
<button type="submit"
form="product_addtocart_form"
title="<?= $escaper->escapeHtmlAttr(__('Add to Cart')) ?>"
class="btn btn-primary bg-btncolor"
id="product-addtocart-button"
data-addto="cart"
>
<?= $heroicons->shoppingCartHtml('border-current'); ?>
<span class="hidden sm:block md:hidden lg:block"><?= $block->getData('is_cart_configure') ?
$escaper->escapeHtml(__('Update item')) :
$escaper->escapeHtml(__('Add to Cart')) ?>
</span>
</button>
<?= $block->getChildHtml('', true) ?>Step 6: Execute below commands:
php bin/magento hyva:config:generate -f
cd vendor/hyva-themes/magento2-default-theme/web/tailwind
npm run build-prodOutput:
Before
After
Conclusion:
Hyvä + Tailwind CSS is a way to give developer flexibility when constructing Magento 2 storefronts without losing any frontend performance. By extending Tailwind you are creating a clean, scalable system that still has your custom brand UI.
Whether you want to add custom spacing units, or inject your own brand fonts, or your brand colours, you can easily extend the configuration abilities of Tailwind, creating a unique experience.
