Tailwind helper: support for compiling CSS

[srid]

Instead of using the twind shim, which requires JS and thus

• won't work with noscript,
• may interfere with other JavaScript initializers (as it demonstrably does with prismJS here not true)

... we should try a windicss like approach in "compiling" the classes from generated HTML into the final minified CSS. The tailwind helper can provide both options.

^{(Might as well explore writing a type-safe Haskell wrapper for Tailwind, as a stretch goal)}

[srid]

There is now twind cli, https://github.com/tw-in-js/twind-cli#twindcli

[srid]

Using https://github.com/srid/tailwind-nix

find . -name \*.html| xargs -d '\n'  windicss

generates a windi.css that can be retroactively referenced in the generated HTML. Since spawning the windicss node program is slow, we should do this only during 'ema generate', and continue to use CDN in dev server mode.

[srid]

Could use https://github.com/tweag/inline-js to evaluate nodeJS code.

[billksun]

Not sure if this helps, but TailwindCSS v2.1 comes with a JIT compiler.

IHP also was able to integrate TailwindCSS into it's framework. Have to do an npm install but it wasn't too difficult to setup.

[srid]

@billksun My understanding is that TailwindCSS's official CLI does not have a mode where you can ask it "here's a list of HTML files; can you dump the compiled and merged CSS for it?".

In windicss, twind/cli - you can do this in a straightforward manner (see srid/emanote#58 (comment)), without having to touch JavaScript (like the need to create & manage a tailwind.config.js).

(Ideally I'd get rid of windicss/twind too; but that will need us to develop a pure Haskell compiler for tailwind, which will also come in handy for live-server integration in Ema so that CDN need not be used anymore)

[srid]

Tailwind 2.2.0 got released, but some of its new features work only in JIT, which means it won't work with Ema's live server as that uses CDN. That sucks, and it is all the more reason to do a complete port of Tailwind to pure Haskell and use that from Ema.

https://github.com/tailwindlabs/tailwindcss/releases/tag/v2.2.0

[srid]

For the record, emanote solved this by using windicss to compile the CSS from generated HTML files,

https://github.com/srid/emanote/blob/master/default/_emanote-bin/compile-css

[srid]

Now that Tailwind 3.0 is released, it just might be better to use the official compiler (thus requiring nodes), and use https://tailwindcss.com/blog/tailwindcss-v3#play-cdn for live server (assuming it works like twind does).

EDIT: Play CDN is actually noticeably slower.