Server Side Rendering of Tailwind

[jonsgreen]

Reason for Change

While composing a blog post about supporting Tailwind for the event websites it occurred to me that we could reduce the page load size and speed of rendering by having the JIT Tailwind compiler run on the server to generate the minimal css that gets rendered on a page. However, since the JIT Tailwind JS is designed to run in the browser this was not a trivial thing to do. As a bit of a mad science experiment I decided to give it a try by using a headless browser and was mostly able to get this to work in development. While this may never actually be merged to production I am at least curious to see whether it could possibly work on Heroku.

Update: while working with tailwind in a different context involving Bridgetown it occurred to me that a saner way to get the minimal tailwind css to compile in the backend was to use the tailwind cli. It took a bit of wrangling but I believe this solution makes more sense especially since it does not require extra heavy gems and buildpacks. Some reasonable assumptions are made around the tailwind config so that it gets converted properly from the in browser JIT version to what the backend CLI expects (i.e. converting tailwind.config to module.exports and removing the script tags.

Changes

• uses Pupeteer to launch a headless browser to render the published
  page and extract the JIT tailwind css to be used directly on public
  published page
• converts Website::Content to be a polymorphic association so that it
  can be used generally on Website or specific per Page
• Uses tailwindcss cli to render minimal css

Minor

• adds a separate default_theme webpack so that unneeded application js
  is not included on website pages

[codeclimate]

Code Climate has analyzed commit 35e9742 and detected 0 issues on this pull request.

View more on Code Climate.