https://discord.umbraco.com
Join Discord
TailwindCSS Block Grid views
# help-with-umbraco
d
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. 🤗
p
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. ``
Note that to get working with TreeShaking enabled (which likely is by default) add the following to the safelist in the tailwind.config.mjs
Copy code
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 😄)
d
Thanks @Prenders. I appreciate it. I don't suppose you looked in to layouts at all?
p
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.
d
Hey @David Peck (Peck Tech) 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
d
You again @Dean Leigh?! Aren't you helpful! Thank you. I will check it out.
d
I'm mostly front end @David Peck (Peck Tech) so it's the only opportunity I have to contribute to the community 🙂 I make stuff like this using Block Grid and CSS Grid:

https://www.youtube.com/watch?v=5fXuTXJjg8gâ–¾

119 Views
PreviousNext
Powered by

Umbraco

A hub and casual space for you to interact with fellow community members and learn more about Umbraco!

Powered by