Introduction

eSheep Twigs is a framework-agnostic Twig extension that adds HTML tag and attribute helpers, class variants (CVA), and Tailwind class merging through one extension class.

eSheep Twigs (esheep/twigs) is a single Twig extension for building HTML in templates. Register one class and you get:

• tag() and {% tag %} to build an element from a tag name and an attribute hash.
• attr() to render an attribute hash inside a tag you write by hand.
• |attr and |remove_class to change the attributes of an HTML string you already have.
• |merge_attributes to combine a component’s attributes with the ones its caller passes in.
• cva() to define class variants for components.
• |tailwind_merge to resolve conflicting Tailwind CSS classes.
• ray() to send values to Spatie Ray while debugging.

It works with any Twig\Environment, in plain PHP or inside a framework.

A quick look

{{ tag('a', {href: '/docs', class: ['link', 'link-primary'], text: 'Docs'}) }}
{# <a href="/docs" class="link link-primary">Docs</a> #}

<input{{ attr({type: 'checkbox', name: 'agree', checked: true, disabled: false}) }}>
{# <input type="checkbox" name="agree" checked> #}

{{ '<div class="a b c">'|remove_class('b') }}
{# <div class="a c"> #}

{{ 'px-2 py-1 bg-red-500'|tw_merge('p-4') }}
{# bg-red-500 p-4 #}

Names and aliases

Every helper has a short name and a long html_* or tailwind_* name. They behave the same: tag() is html_tag(), |tw_merge is |tailwind_merge, and so on. The reference lists both.

Other extensions can’t take these names over. twig/html-extra, for example, also defines html_attr() and html_cva(), but templates always get this package’s versions, whatever order the extensions are registered in. See Installation.

Where to next

Credits

The tag and attribute helpers are ported from Craft CMS. cva() comes from twig/html-extra, and Tailwind merging from tailwind-merge-php.