loki/magento2-css-utils

CSS class and style utilities for Magento 2 PHTML templates

1.0.3 2025-08-27 13:59 UTC

Requires

• ext-pcre: *
• magento/framework: ^103.0

OSL-3.0

README

This is part of the core packages for Loki Components, as is being used by the Loki Checkout suite. This module allows a Magento 2 template to call $css() and $style() to generate CSS classes and CSS styles, that are easily overwritten via XML layout and/or PHP parser classes - without template overrides.

Installation

Install this package via composer:

composer require loki/magento2-css-utils

Next, enable this module:

bin/magento module:enable Loki_CssUtils

Basic usage

Add the CSS utility to the PHP-section of your PHTML template:

<?php
use Loki\CssUtils\Util\CssClass;

/** @var CssClass $css */
?>
<div class="<?= $css('') ?>">
    <h3 class="<?= $css('', 'heading') ?>">
        Hello World
    </h3>
</div>

Next, allow overriding CSS styles via XML layout. For instance, the following makes use of TailwindCSS utility classes:

<referenceBlock name="example">
    <arguments>
        <argument name="css_classes" xsi:type="array">
            <item name="block" xsi:type="array">
                <item name="default" xsi:type="string">m-4</item>
            </item>
            <item name="heading" xsi:type="array">
                <item name="default" xsi:type="string">text-4xl</item>
            </item>
        </argument>
    </arguments>
</referenceBlock>

See for more usage https://loki-checkout.com/