TailwindCSS 3 JIT engine and dynamic classes via PHP/Kirby

Kirby 3
1

So in principle, using TailwindCSS v3 with Kirby is mostly a breeze and most cases can be solved using custom Tailwind CSS layers (e.g. Markdown, Blocks content). However, I now stumbled over an issue with Kirby Layout Blocks. They can output a grid which is fine but one thing remains:

This is my site/snippets/layouts.php right now:

<?php // Tell TailwindCSS’ JIT engine that we need the col-span classes anyay. It doesn’t auto-collect it due to the dynamic PHP colspan setting. ?>
<div class="hidden md:col-span-1 md:col-span-2 md:col-span-3 md:col-span-4 md:col-span-5 md:col-span-6 md:col-span-7 md:col-span-8 md:col-span-9 md:col-span-10 md:col-span-11 md:col-span-12"></div>
<?php foreach ($field->toLayouts() as $layout): ?>
<section class="md:grid md:gap-6 md:grid-cols-12" id="<?= $layout->id() ?>">
  <?php foreach ($layout->columns() as $column): ?>
  <div class="md:col-span-<?= $column->span() ?>">
    <div class="text">
      <?= $column->blocks() ?>
    </div>
  </div>
  <?php endforeach ?>
</section>
<?php endforeach ?>

Due to the fact that the JIT engine searches the php templates, it usually works fine until it comes to the point that it doesn’t interpret PHP. So stating $column->span() isn’t useful for the JIT engine and now I’m trying to find a better solution than adding an empty hidden div with the required classnames in there.

Does anyone else have experience or ideas on this? Thanks in advance.
—Anselm

1 Like
2

Adding them to a comment should work too :slight_smile:
At least it did with the jit engine in version 2.

something like:

<?php 
 // this is here for css purge:
 // md:col-span-1 md:col-span-2 md:col-span-3 md:col-span-4 md:col-span-5 md:col-span-6
 // md:col-span-7 md:col-span-8 md:col-span-9 md:col-span-10 md:col-span-11 md:col-span-12
?>

<?php foreach ($field->toLayouts() as $layout): ?>
...

You can also “safelist” classes in your tailwind config

1 Like
3

Thanks, didn’t find the page you linked to in the updated v3 docs anymore and thought a php comment wouldn’t be enough but in that case cool that the parser is not smart enough to determine that and only looking for the term itself regardless of the language.
Best solution of course would in that case be the regular expression as mentioned in the docs.

4

I have a snippet where I just chuck all the classes that would not get included otherwise - it does not have to be used anywhere.

2 Likes
5

Hi, there is a cleaner way to achieve that with the safelist option see in their doc Content Configuration - Tailwind CSS

1 Like
6

Thanks for reminding me about it, I found it back then, used it but never reported back here. Marked yours as valid and best solution now.