Tailwind Merge

// site/snippets/component.php
<div <?= merge('h-full w-full bg-neutral-100', $class) ?>></div>

// site/templates/default.php
<?php snippet('component', ['class' => 'w-1/2']) ?>

// output
<div class="h-full bg-neutral-100 w-1/2"></div>

Intelligently merge Tailwind classes without style conflicts in your Kirby templates

Usage

This plugin provides two helper functions to use in your blueprints. Whether functions should be registered can be controlled in your config.php, see Options.

`attr()`

This helper function works similar to the Kirby built-in attr() function and overwrites it to support Tailwind Merge behaviour for the class attribute.

You'll need to disable the built-in attr() helper at the top-most location in your index.php file - before Kirby is loaded.

define("KIRBY_HELPER_ATTR", false);

Example

// site/snippets/component.php
<div <?= attr(['class' => ['h-full w-full bg-neutral-100', $class], 'data-attr' => 'hello world!']) ?>>[...]</div>

// site/templates/default.php
<?php snippet('component', ['class' => 'w-1/2']) ?>

// output
<div class="h-full bg-neutral-100 w-1/2" data-attr="hello world!">[...]</div>

`merge()`

merge() applies Tailwind Merge behaviour and outputs a class attribute.

Example

// site/snippets/component.php
<div <?= merge('h-full w-full bg-neutral-100', $class) ?>>[...]</div>

// site/templates/default.php
<?php snippet('component', ['class' => 'w-1/2']) ?>

// output
<div class="h-full bg-neutral-100 w-1/2">[...]</div>

Options

Option	Default	Description
`prefix`		Set a prefix for your tailwind classes
`helpers.attr`	`true`	Register the `attr()` helper function
`helpers.merge`	`true`	Register the `merge()` helper function

Options allow you to fine tune the behaviour of the plugin. You can set them in your config.php file:

return [
    'tobimori.tailwind-merge' => [
        'prefix' => 'tw-',
    ],
];

Related plugins

$url  = 'https://getkirby.com/kosmos.rss';
$feed = new FeedReader($url);

dump($feed->articles());

FeedReader

by Uwe Gehring

Plugin to show feeds. The FeedReader plugin provides an unified access to the elements of a feed. A feed might be of type RSS, Atom or JSON …

Kirby Template Sugar

by Arno Schlipf

Syntactic sugar for Kirby templates that makes working with snippets and slots a breeze.

Kirby Vite

by Arno Schlipf

A set of helper functions to get the correct path to your versioned css and js files generated by Vite.

page('blog')->children()->feed([
    'title'       => 'Latest articles',
    'link'        => 'blog'
]);

Feed and Sitemap

by Bruno Meilick

Generate a RSS or JSON-Feed or XML-Sitemap from a collection of pages

<?= $page->thumbsUp()->ecco('👍', '👎') ?>

Field Ecco

by Bruno Meilick

Field method to echo strings based on the boolean value of a field

<article id="{{ page.slug }}">
  <h2>{{ page.title }}</h2>
  {{ page.text }}
</article>

Handlebars Templates

by Bruno Meilick

Component, snippet and page method for semantic templates with Handlebars and Mustache

<?= $page->myfield()->htmlPurify() ?>

HTML Purifier

by Bruno Meilick

Static class method, Uniform-Guard and Field-Method to filter your "dirty" HTML inputs to "clean" HTML.

<?php if ($page->isMobile()): ?>
  Nice mobile phone!
<?php endif ?>

Mobile Detect

by Bruno Meilick

Static class and page methods for using the mobile detect lib

<?= $page->random('words', 'lorem', 5) ?>

Random

by Bruno Meilick

Kirby tag and page method to generate various random values

$pages->bettersearch($string, $options)

Better Search

by Bart Vandeputte

Search for full word combinations rather than just individual words.

Laravel Mix Helper

by Diverently

Use the mix helper function to get the correct path to your versioned CSS and JS files generated by Laravel Mix.

<button <?= attributes([
    'type' => $type ?? 'button',
    'class' => [
        'btn',
        'btn--large' => $size === 'large'
    ],
 ])->merge($attr ?? []) ?>>

Template Attributes

by Fabian Michael

Vue.js/Laravel-Blade-like attribute API for snippets and templates.

Consent Gate

by fendinger

This plugin blocks the loading of content from external sources. The content is only loaded if a consent is accepted (GDPR compliant). The …

$point = Geo::point(49.4883333, 8.4647222);

echo $point->lat();
echo $point->lng();

GEO

by Kirby Team

This plugin adds basic geo search and conversion functionalities to Kirby

foreach ($page->fruits()->toChoices() as $fruit) {
    echo $fruit;
}

Choices

by hana+nils

Choices is a plugin that provides methods to manage field options in the frontend. For any field – like select, multiselect or checkboxlist …

// using the username
$users->toList();

// using the page title
$pages->toList();

// using the filename
$files->toList();

List Methods

by hana+nils

List Methods is a plugin providing methods to generate comma-separated list from collections like pages, users or files. It allows for …

snippetWhen('article', $category->isNotEmpty())

snippetWhen Helper

by hana+nils

snippetWhen is a helper function to conditionally embed snippets.

<?= $page->text()->toTree()->level(3) ?>

Tree Methods

by hana+nils

Tree Methods converts field values to HTML and helps adapting the resulting markup by changing headline hierarchy, wrapping and filtering …

$object->isPage();
$object->isUser();
$object->isFile();
$page->isType('article');

Type Methods

by hana+nils

Type Methods is a plugin helping to identify the type of an object, either page, user or file, in order to simplify logic in snippets that …

XSLT Templates

by hana+nils

Template component for XSLT support in your templates. It let's you specify the needed data for each blueprint which is then provided as …

<kb:date format="d/m/Y" field="date" />

Carver

by Hash&Salt

Write custom HTML tags, powered by PHP

<?= $page->text()->chopper(20) ?>

Chopper

by Hash&Salt

Create excerpts from fields and define the HTML tags you wish to keep

<?= $file->id3('artist') ?>

Gilmour

by Hash&Salt

Read ID3 tags from audio files and use it in your templates.

fields:
  example:
    label: Paste code here
    type: blocks
    fieldsets:
      - code

Highlighter

by Johann Schopplich

Server-side syntax highlighting for the Kirby code block & KirbyText

Blade Templates

by Lukas Leitsch

Use Laravel Blade templates for your Kirby site

<!doctype html>
<head>
  <?= vite(['assets/css/app.css', 'assets/js/app.js']) ?>
</head>

Laravel Vite

by Lukas Kleinschmidt

Use the laravel-vite-plugin in your Kirby application.

📁 snippets
├─ 📄 header.controller.php
└─ 📄 header.php

Snippet Controller

by Lukas Kleinschmidt

Define snippet controllers in a similar way to page controllers.

<?php snippet('cookie-modal', [
    'assets'      => true,
    'showOnFirst' => true,
    'features'    => [...],
]) ?>

Cookie Consent Modal

by Michael Scheurich

A customizable cookie consent modal for Kirby3.

<?= $page->myfield()->inherit() ?>

Kirby Inherit

by Microman

If the current field is empty or does not exist, it gets the same field from the parent pages. It goes all the way to the site.

<?php snippet('detect-adblock') ?>

Detect Adblock

by oweb studio

Detect ad blockers and manage the warning messages that will be displayed for Kirby 3.

Plates

by oweb studio

Plates native PHP template engine/system for Kirby 3.

Template Stacks

by oweb studio

Template stacks allows you to push to named stacks which can be rendered somewhere else in another snippet or template.

<?php snippet('cookie') ?>

Cookie Approval

by Timo Schneider

Add a cookie approval banner to your templates

foreach ($page->similar($options) as $p) {
  echo $p->title();
}

Similar

by Sonja Broda

Twig Templates

by wearejust

Add support for Twig templates to your Kirby installation

<?= $page->title()->kirbytextWrap('h1') ?>

KirbytextWrap

by Yoan Malié

Parse Kirbytext and wrap the result in an HTML element of your choice

Cookieconsent

by Zephir Software Design AG

Integrates the orestbida/cookieconsent JS plugin into Kirby 3. Comes with two pre-configured types (simple / customizable) to get you …

Other plugins by Tobias Möritz

BlurHash

by Tobias Möritz

Optimized image placeholders with the BlurHash algorithm

Icon Field

by Tobias Möritz

A simple Icon field for Kirby - throw your Icon pack in a folder, add the field to your blueprints and you're good to go.

ImageMagick Extended

by Tobias Möritz

Extend Kirby's built-in ImageMagick driver, work better with GIFs and APNGs

ThumbHash

by Tobias Möritz

Smarter image placeholders with the ThumbHash algorithm – supports transparency!