Layout + Tailwind 4

The CMS Questions
1

I have Tailwind 4 working apart for Layout grid columns.

I’ve followed some guidance from other posts but am stuck on column width. I’ve run the build and wait commands but not sure if I need to run a specific command to set the safelist. Or my grid classes are not right?

/src/tailwind.css

@import "tailwindcss";
@source not "../vendor";

module.exports {
  content: [
    './site/**/*.{html,js,php}',
  ],
  safelist: [
    'col-span-1',
    'col-span-2',
    'col-span-3',
    'col-span-4',
    'col-span-5',
    'col-span-6',
    'col-span-7',
    'col-span-8',
    'col-span-9',
    'col-span-10',
    'col-span-11',
    'col-span-12'
  ]
}

template

	<?php foreach ($page->layout()->toLayouts() as $layout): ?>
	
	<section class="grid grid-cols-12 gap-2 mb-4" id="<?= $layout->id() ?>">
		<?php foreach ($layout->columns() as $column): ?>
		<div class="col-span-<?= $column->span() ?> bg-slate-300">
			<div class="blocks">
				<?= $column->blocks() ?>
			</div>
		</div>
		<?php endforeach ?>
	</section>
	
	<?php endforeach ?>

output

<section class="grid grid-cols-12 gap-2 mb-4" id="cc88b508-3a3a-4031-b071-53db841d7ecc">
	<div class="col-span-6 bg-slate-300">
		<div class="blocks">
			<h2>Row 1, 1/2, 6 columns</h2>
		</div>
	</div>
	<div class="col-span-6 bg-slate-300">
		<div class="blocks">
			<h2>Row 1, 1/2, 6 columns</h2>
		</div>
	</div>
</section>
<section class="grid grid-cols-12 gap-2 mb-4" id="345c6bbf-f824-4d77-b185-498f6d86402b">
	<div class="col-span-12 bg-slate-300">
		<div class="blocks">
			<h2>Row 2, 1/1, 12 columns</h2>
		</div>
	</div>
</section>

result

Screenshot 2026-03-17 at 10.47.40
Screenshot 2026-03-17 at 10.47.401020×550 26.7 KB

2

The `safelist` option does no longer exist in TailwindCSS 4

1 Like
3

Ah ok :slight_smile:

Reading the guidance I can see I can use ranges, will have a play.

Thanks for the quick reply.

4

Hi @pixelijn, thanks the ranges option worked perfectly.

@source inline("col-span-{1,2,3,4,5,6,7,8,9,10,11,12}");