Custom Shortcode and Tailwind Classes (Image Masonry Grid)

[max-alletsee]

Hello,

first of all, thanks a lot for the fantastic work on the theme - I really love it. ❤️

I am currently trying to build a custom shortcode that adds a horizontal masonry grid for images to my website. I started off with a minimal example from some Tailwind CSS templates (source code here, example here). When creating a custom shortcode based on this example, this results in the pictures appearing below each other, each of them being sized to the full width of the content section (and not sized depending on the Tailwind classes specified) - essentially, this is not a grid, but a list of pictures.

When I check the compiled CSS file, I notice that some classes from the shortcode are included, while others are missing - e.g. "h-72", which is relevant for the grid.

I'm struggling to figure out what I would need to do in order to make this work. If my understanding of the Advanced Customisation is correct, the JIT renderer includes classes that are introduced in HTML files sub-folders of "layouts/...", but somehow this doesn't always seem to happen in my case.

In case it matters, I have manually installed Congo. On the same site, I'm using other shortcodes which are working properly, so I'm quite sure that it's not a general issue with my custom shortcuts setup.

Could somebody please help me understand what I would need to change to fix this?
Any help is appreciated - thanks in advance. 🙏

[jpanther]

Hi @max-alletsee, what is the build command that you are using when generating the Tailwind CSS? Have you set up your project similar to the example given in the Advanced Customisation section? It's important that you adjust the command or Tailwind configuration if you are using a different project structure, which may be why it's not picking up your custom shortcodes.

[max-alletsee]

Thanks a lot for your help. I figured it out and indeed the error was on my side: I had somehow misunderstood the documentation that the CSS would be recompiled without me manually kicking this off in NPM. When I understood the documentation and implemented it, it works like a charm.

[jpanther]

Happy to hear you managed to get this working.