I’m trying to get 11ty + Netlify CMS + Tailwind working together but am experiencing some problems. Tailwind’s defacto JS-lib is Alpine.
I’ve grifted a lot of what Hylia is doing to generate previews because I know that’s a working installation. That file looks like this:
// preview.js which is linked up at the bottom of admin/index.html
const env = nunjucks.configure();
class Preview extends React.Component {
render() {
const {entry, path, context} = this.props;
const data = context(entry.get('data').toJS());
const html = env.render(path, { ...data });
return <div dangerouslySetInnerHTML={{ __html: html }}/>
}
}
const Product = ({ entry }) => (
<Preview
entry={entry}
path="layouts/product.njk"
context={({ title, text, sections }) => ({
title,
content: text,
sections
})}
/>
);
CMS.registerPreviewTemplate('products', Product);
The whole template renders as expected but JS doesn’t work. Alpine I think is supposed to watch for mutations, but instead it doesn’t do anything and all my dropdown menus and interactions don’t work.
I’ve tried created a ref
to the node and manually initializing with Alpine.initializeComponent(this.myRef.current)
but it’s not working either.
Has anyone been successful making Tailwind + Alpine + 11ty + NetlifyCMS work?