PHP code example of tobimori / kirby-tailwind-merge

1. Go to this page and download the library: Download tobimori/kirby-tailwind-merge library. Choose the download type require.

2. Extract the ZIP file and open the index.php.

3. Add this code to the index.php.
    
        
<?php
require_once('vendor/autoload.php');

/* Start to develop here. Best regards https://php-download.com/ */

    

tobimori / kirby-tailwind-merge example snippets


define("KIRBY_HELPER_ATTR", false);

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

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

// site/snippets/blocks/simple-text.php
<div class="<?= cls([
        'bg-neutral-white',
        'py-32' => true,
        cls([
            'px-16' => $block->type() !== 'simple-text',
            'px-8' => $block->type() === 'centered-text'
        ]) => $page->intendedTemplate() == 'home'
    ]); 

<div <?= merge([
        'bg-neutral-white', // always applied if no condition is present
        'py-32' => true, // always applied, because condition is true
        cls([ // this works like an "AND", ANY entries in cls function will only be applied if the condition is true, this results in...
            'px-16' => $block->type() !== 'simple-text', // applied when block type is not 'simple-text', but intendedTemplate is 'home'
            'px-8' => $block->type() === 'centered-text' // applied when block type is 'centered-text' and intendedTemplate is 'home', also replaces 'px-16' from above
        ]) => $page->intendedTemplate() == 'home' // "parent" AND condition
    ]) 

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

return [
    'tobimori.tailwind-merge' => [
        'config' => [
            'theme' => [
                'text' => ['h1', 'h2', 'h3', 'h4'],
                'font' => ['heading', 'sans', 'handwriting'],
                'font-weight' => ['normal', 'semibold', 'bold'],
            ],
        ],
    ],
];