kiliman/tailwindui-crawler

CSS not applied

sbilde opened this issue · 4 comments

sbilde commented

Thanks for this great contribution.
When yarn is done, the output looks pretty okay regarding file-structure, however,This something is missing I guess:

This is the .env file: https://d.pr/i/dnmiw8

This is the output: https://d.pr/i/n6TnuX

This is the output in browser (using Serve): https://d.pr/i/cnBQwm

It looks like the CSS is not applied. - As I understand, it defaults to TailwindCSS CDN if I'm not specifying local CSS.

Can anyone point me in the right direction here? - Thanks

smeijer commented

Same, it looks like the stylesheets aren't injected in the demo iframes. Maybe it's caused by the v2 update?

kiliman commented

I've been busy with work, so haven't had a chance to verify it against the v2 update. I'll play with it over the weekend.

kiliman commented

Ok, sorry for the delay. I looked into this and here are my observations:

  1. The crawler now splits the component files separately from the "preview" files. The component files no longer contain the CSS reference as it only outputs the contents of the <body/> tag. Make sure BUILDINDEX=1 to generate the preview.

  2. When generating the preview, the default CSS was from the CDN: https://cdn.jsdelivr.net/npm/@tailwindcss/ui@latest/dist/tailwind-ui.min.css. However, this does not appear to include the new 2.0 classes. The workaround is to update your config to include ADDTAILWINDCSS_URL=https://tailwindui.com/css/components-v2.css. This will override the default to use the 2.0 classes.

NOTE: This CSS is most likely the generated (purged) file. The actual link contains an id parameter (most likely a hash) and a header cache-control: max-age=14400. Although this will get the updated CSS files, it's possible that Tailwind will update their components to use additional classes and thus the CSS will change, but the crawler will still have the cached version. The cache expires in 4 hours, so probably not a big deal.

Again, this is a temporary workaround. The solution is to either get the full URL (with id) of the CSS and include that in the preview, or actually build the CSS locally using a tailwind.config.js file which is planned for v3 of the crawler.

Hope this helps.

kiliman commented

Cleaning up issues.

v3.0 now downloads an exact copy of the Tailwind UI site when BUILDINDEX=1 so there shouldn't be any issues with preview locally.