Nunjucks support: 11ty + Tailwind + AlpineJS + NetlifyCMS

I’m currently developing my new workfolio with a ver NEAT starter template made with a JAMstack (serverless) that utelizes nunjucks templating and Tailwind 2.x

I’m actually using Pinegrow to do plenty of editing work so it’s kind of conceptualizing this in any case on how to use this. But the editor renders the HTML, it just doesn’t apply any styling or the ability to visually edit it since it’s dynamic content.

What’s cool I guess is that Tailwind Tooling can still be turned on, without adding the resources, so the visual editing still works. That’s really good work imo, very anti-fragile.

What could get some improvement is the support for local working environments, such as using BrowserSync actually in sync with an instance i’m already running.

I can’t seem to get it right from the settings in Pinegrow itself. Even when I point to the exact same ports, add my own config. Nothing will trustfully sync it, so you’re left choosing the one you can.

The editor prefers (rightfully) it’s own internal server, but what you want is that they both (the render in the browser and PG) present the single source of truth, live. I can still use Pinegrow that way and trust what I see.

So an option to show which localhost you actually use to render in a view inside Pinegrow could solve that issue. Like a remote url, locally. That is already possible, to work with a remote url.

Now I have to constantly save and swap to my browser to see the page update, where in my IDE it works instantly. It just doesn’t work as nicely as Pinegrow internally does on that matter.

When not running BrowserSync at all, it actually renders some of the styles and markup correctly;

Also, to test this NEAT starter kit at Pinegrow to see what I mean; this is the base I use GitHub - surjithctly/neat-starter: Starter Template for Netlify CMS, Eleventy, Alpine JS & Tailwind CSS

2 Likes