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 https://github.com/BeaconCMS/beacon_live_admin/blob/e466a84a5e376a3b849988b13a139e8ee93aa3f6/assets/svelte/components/PageWrapper.svelte#L26

The tailwind object is instantiated with a tailwind config: https://github.com/BeaconCMS/beacon_live_admin/blob/e466a84a5e376a3b849988b13a139e8ee93aa3f6/assets/svelte/components/PageWrapper.svelte#L21

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: https://github.com/BeaconCMS/beacon_live_admin/blob/e466a84a5e376a3b849988b13a139e8ee93aa3f6/assets/svelte/components/PageWrapper.svelte#L16-L19

Ref https://github.com/BeaconCMS/beacon_live_admin/issues/111#issuecomment-2083016691

[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.