Support require on tailwind config

[leandrocp]

The Visual Page Builder has built-in Tailwind integration with custom configuration per site, which means we have to dynamically load the tailwind config in order to apply the styles in the visual editor so every customization like fonts, colors, and others must match what the user see on the preview.

Since tailwind is a node package we're using https://github.com/mhsdesign/jit-browser-tailwindcss to mock some APIs to make it work on the browser, ie: whenever the user change something in the page builder it will compile the stylesheet again.

This is done at

beacon_live_admin/assets/svelte/components/PageWrapper.svelte

Line 26 in e466a84

const css = await tailwind.generateStylesFromContent($tailwindInput, [content])

The tailwind object is instantiated with a tailwind config:

beacon_live_admin/assets/svelte/components/PageWrapper.svelte

Line 21 in e466a84

const tailwind = window.createTailwindcss({ tailwindConfig })

The whole Page Builder is a Svelte application running inside a LiveView so that tailwindConfig is actually provided by the backend as a string.

That works fine for simple use cases but the problem is that we can't require modules (plugins) inside the config, ie: we can't call this in the config module:

let plugin = require('tailwindcss/plugin')

That breaks due to the async dynamic loading mechanism we use:

beacon_live_admin/assets/svelte/components/PageWrapper.svelte

Lines 16 to 19 in e466a84

	let b64moduleData = "data:text/javascript;base64," + btoa(twConfig.replace("module.exports = ", "export default "))
	let configPromise = import(b64moduleData)
	onMount(async () => {
	const [_, { default: tailwindConfig }] = await Promise.all([tailwindJitPromise, configPromise])

Ref #111 (comment)

[leandrocp]

Closed it by mistake

[Serabe]

Summary of today:

• Tried to load @tailwindcss/forms and @tailwindcss/typography from the browser and it has the following issues:
  • Tailwind plugins uses CommonJS modules (the one with the module.export) and I cannot find a simple way to make it work from the browser (tried modifying the code and evaling it, but here it comes the second problem).
  • Tailwind plugins have dependencies, at the very least, on @tailwindcss/plugin.
• The above makes that, even the JIT can use plugins, we cannot easily load them. All approaches to loading these modules go through pre-compilation.
• I have a local instance of Beacon Admin and Beacon running. Next week I'll try to expose some basic plugins from Tailwind so they can be used from the browser. If successful, then we can discuss how far we want to get this, but it looks like a preferable way would be to do this on server when Tailwind v4 is released.

[Serabe]

BeaconCMS/beacon#542
#183

[leandrocp]

Closed by:

• Tailwind config improvements beacon#545
• Serve esm tailwind config beacon#547
• Install dep @mhsdesign/jit-browser-tailwindcss #184
• Visual Page Builder - load tailwind config from dynamic URL #185

Thanks @Serabe !

[leandrocp]

Proof and example BeaconCMS/beacon_demo@d903e61