Layout rendering and tailwind

Kirby 4 Question❓
1

Hi there,

here’s my code to render a layout field:

  <?php foreach ($page->layout()->toLayouts() as $layout): ?>
    <section class="grid grid-cols-1 md:grid-cols-<?= $layout->columns()->count() ?> first:justify-items-center gap-x-8">
      <?php foreach ($layout->columns() as $column): ?>
        <div >
          <div class="blocks my-4">
            <?= $column->blocks() ?>
          </div>
        </div>
      <?php endforeach ?>
    </section>
  <?php endforeach ?>

As you can see, I have grid-cols-1 md:grid-cols-<?= $layout->columns()->count() ?> in place to adapt to the number of columns from my template.

Thing is, as md:grid-cols-<?= $layout->columns()->count() ?> is dynamic then Tailwind doesn’t generate the utilities needed in the css and it doesn’t work.

I’m not sure there is the solution is on Tailwind or Kirby side. Wonder if any around has encountered this kind of issue. Help would be greatly appreciated.

Thanks

2

Ok I found a solution but maybe there’s a more elegant one.

It is possible to force tailwind to include some utilities in the build phase by populating the safelist in tailwind.config.js file. Like this in my particular case :

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    'src/**/*.{html,js}',
    'site/**/*.php',
  ],
  safelist: [
    'md:grid-cols-2',
    'md:grid-cols-1'
  ],
...