I saw that twin.macro doesn't work with Remix, was wondering if there is another idiomatic way to do this
#Inlining Tailwind CSS at compile time to reduce CSS size?
spark lynx
additional context is that I am using it to generate static pages ala https://codesandbox.io/p/sandbox/mjackson-remix-ssg-example-bpwztn?
floral dagger
I saw that twin.macro doesn't work with Remix, was wondering if there is another...
What's wrong with using Tailwind in the canonical way, where you apply classNames to elements and have Tailwind generate the CSS file for you?
spark lynx
lighthouse is telling me it blocking rendering while loading /assets/tailwind-PHVFVC5P.css
timber herald
It's not a big deal, and if it really bothers you there's a trick to fix it.
// app/routes/root.tsx
...
{ rel: 'preload', href: fontStyleSheetUrl, as: 'style' },
{ rel: 'stylesheet', href: fontStyleSheetUrl },
Do this with each of your css will unblock them.
muted harbor
Well, if you inline this, Lighthouse might complain about the document size. If you avoid the blocking by loading the CSS later on, Lighthouse might complain about the layout shift. So preloading should be the way to go if you really want to squeeze the last few milliseconds out of this part of optimization.
I’m on my phone so can’t look at the sandbox example. If that one does not already remove the Scripts tag (it probably does): Remove that one as well, JS is probably a bigger issue than the few bytes of CSS 😅
timber herald
Yeah, the css render blocking warning has trivial performance impact and really should be removed.
Any runtime css guaranteed to be 100x slower from waterfall.
spark lynx
Ok good to know I should ignore it. Is there a better way to diagnose why the page render is slow?
Also someone told me I can use babel / twin.macro with vite spa mode
timber herald
Webpagetest.org usually offers more actionable advice.