Server Side Rendering of Tailwind #301
Open
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
jonsgreen
force-pushed
the
server-side-tailwind
branch
from
dbee3ab to
e5f0f9f
Compare
jonsgreen
force-pushed
the
server-side-tailwind
branch
from
e5f0f9f to
8fbf45c
Compare
jonsgreen
force-pushed
the
server-side-tailwind
branch
from
8fbf45c to
001d3d1
Compare
jonsgreen
force-pushed
the
server-side-tailwind
branch
from
001d3d1 to
35e9742
Compare
|
Code Climate has analyzed commit 35e9742 and detected 0 issues on this pull request. View more on Code Climate. |
jonsgreen
force-pushed
the
server-side-tailwind
branch
from
35e9742 to
5fb5c74
Compare
- uses Puppeteer 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 - adds a separate default_theme webpack so that unneeded application js is not included on website pages -
jonsgreen
force-pushed
the
server-side-tailwind
branch
from
5fb5c74 to
04baf90
Compare
jonsgreen
force-pushed
the
server-side-tailwind
branch
from
04baf90 to
ef13af0
Compare
- update tailwind jit js pack to 3.1.4 - match tailwind cdn and node versions
jonsgreen
force-pushed
the
server-side-tailwind
branch
from
ef13af0 to
e7b5874
Compare
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
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.configtomodule.exportsand removing the script tags.Changes
uses Pupeteer to launch a headless browser to render the publishedpage and extract the JIT tailwind css to be used directly on public
published page
can be used generally on Website or specific per Page
Minor
is not included on website pages