search

kiliman / tailwindui-crawler

tailwindui-crawler downloads the component HTML files locally
MIT License
763 stars 95 forks source link

index.html links are absolute (2.3) #10

Closed vladdu closed 4 years ago

vladdu commented 4 years ago

This makes it hard to just browse the files, a server is needed...

kiliman commented 4 years ago

That's why I recommend using the serve package.

yarn add -g serve
serve

Run serve from the root of your OUTPUT folder (where index.html is located).

image

image

image

vladdu commented 4 years ago

I saw that afterwards, but it still doesn't work. I needed to use "yarn global add serve" and manually add ~/.yarn/bin to $PATH. After that, the components are shown completely unstyled.

Annotation 2020-04-16 212123

I realize that using relative links makes things a bit more complicated and probably not worth it, because it's more than removing the initial /

vladdu commented 4 years ago

Hmm, ok, so I needed addTailwindCss: it isn't clear what that option does: add a link where? I thought initially it's only a link to their site.

kiliman commented 4 years ago

Sorry, the addTailwindCss transformer adds the following to each component HTML file. If you want to use the Inter font (the same as on the tailwindui.com site), add the userInter transformer.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@tailwindcss/ui@latest/dist/tailwind-ui.min.css" />
kiliman commented 4 years ago

Also, you may want to upgrade to v2.3. The component code no longer includes the Alpine.js markup, so it won't be interactive on your local copy. The update adds an option to ensure that it gets the the version with Alpine.

vladdu commented 4 years ago

Thanks. I created a PR to make it clear how to have styled components when served via serve