Change layout output from style to a class

[Michiel_Vos]

The “microsite” demo outputs style tags for the amount of columns.

Example: style=“–columns: 4”

Is it possible to change these outputs to classes instead of style tags (I am using tailwind).|

And if so, how?

[texnixe]

@Michiel_Vos

Is it possible to change these outputs to classes instead of style tags (I am using tailwind).|

Yes, you can use CSS classes instead. But not sure with what you mean with “How”. I mean, it totally depends whether you use CSS grid or flex box, and the way you define your columns depends on that.

[Michiel_Vos]

I got it to work. Explanation here for anyone else that needs this:

Changed my html:

		<?php foreach ($page->modules()->toLayouts() as $layout): ?>

			<section class="relative isolate min-h-screen flex justify-center items-center bg-gray-50">
				<div class="mx-auto max-w-7xl">
					<div class="grid grid-cols-12 gap-8 p-8" id="<?= esc($layout->id(), 'attr') ?>">
						<?php foreach ($layout->columns() as $column): ?>
							<?php $columnClass = 'col-span-' . esc($column->span(), 'attr');
							?>
							<div class="<?= $columnClass ?>">
								<div class="blocks text">
									<?= $column->blocks() ?>
								</div>
							</div>
						<?php endforeach ?>
					</div>
				</div>
			</section>
		<?php endforeach ?>

Added the tailwind classes to the safelist:

And this is my output: