tribal wigeon
To be totally honest, I'm hoping someone more cleverest than me has already created views to render the Block Grid using Tailwind classes, and is also generous enough to share them?
We had a go and have found it really hard. I can offer lots of positive energy in return. 🤗
soft crystal
Hey David...
I've implemented a basic block grid recently on a headless site.
I'm using the following classes on the grid container:
<div class="grid grid-cols-12">
Then within each block element markup, rendering a dynamic class based on the column span value.
<div class=col-span-${block.columnSpan}>
Note that to get working with TreeShaking enabled (which likely is by default) add the following to the safelist in the tailwind.config.mjs
safelist: [ { pattern: /grid-cols-/, variants: ['sm', 'md', 'lg', 'xl', '2xl'], }, { pattern: /col-span-/, }, ],
(all the above delivered with upmost positive energy and in no way cleverest than you 😄)
tribal wigeon
Thanks @soft crystal. I appreciate it. I don't suppose you looked in to layouts at all?
soft crystal
I've not sadly... just a basic grid with root blocks. It might be that you can leverage nested grids in Tailwind somehow. Sorry to not be of any more help.
scarlet gale
Hey @tribal wigeon please give UmBootstrap a try - it uses Bootstrap CSS Grid classes for both layout and areas as well as features e.g. g-col-12, that can just be replaced with Tailwinds e.g. grid-cols-12
I intended to do an UmTailwind but have been in and out of surgery, but hope to get back to it after CG.
https://marketplace.umbraco.com/package/umbraco.community.templates.umbootstrap
tribal wigeon
You again @scarlet gale?! Aren't you helpful!
Thank you. I will check it out.