Some components' pages dont match tailwind UI

[connecteev]

After installing and running the tailwindui-crawler, some components' pages dont match those of tailwindui. For example: http://localhost:5000/components/application-ui/data-display/description-lists Looks very different from https://tailwindui.com/components/application-ui/data-display/description-lists

[kiliman]

Hmm. Can you send me a screenshot? Here's my local version. Are you on the latest version 2.3? What HTMLMODE are you using: alpine or comments? The alpine version is literally the copy used in the <iframe> preview.

[connecteev]

@kiliman Absolutely! First off, looks like the container divs, etc are being stripped out, so this is not a huge issue.

This is what I am seeing: https://www.webpagescreenshot.info/#v2=pQsjt0GR4 And this is what I should be seeing (from the tailwindUI website): https://www.webpagescreenshot.info/#v2=kEBCgWZZG

Yes, I am using 2.3, I discovered your repo yesterday and am using the latest version. These are my settings:

OUTPUT=./output
BUILDINDEX=1
HTMLMODE=comments
TRANSFORMERS=addTailwindCss,prefixSrc,useInter,convertVue,stripAlpine
VUE_OUTPUT=$OUTPUT/vue
STRIPALPINE_OUTPUT=$OUTPUT/no-alpine

By the way, what does alpine mode for HTMLMODE mean? Does it mean that it uses alpine.js? And what does 'comments' do? I did read the documentation but didn't get it: The Tailwind UI components have removed the Alpine.js code from the HTML. The crawler now includes a HTMLMODE setting to include either the Alpine.js code (alpine default) or download with HTML comments (comments).

[kiliman]

When Tailwind UI first came out, the code included the Apline.js markup to support interactivity. So when you click on menu buttons, it would pop up, etc.

A lot of people were complaining because they had to remove that code when converting to React, etc. So Adam updated the site so the Code button showed the non-Alpine version with HTML comments showing what you should do for events/transitions. See https://gist.github.com/adamwathan/06faa4e9ee1571d3eb47cc0349b965cd

The preview (iframe) still used the Alpine version, so you could click on things.

Because of this, the crawler had to change since the interactive version (which used to be the same as the code version) is stored in different places on the page.

The HTMLMODE setting determines which HTML to download. alpine means download the interactive version, whereas comments means download the HTML commented version.

The problem is that if are building the index file, then you most certainly want the Alpine/iframe version as the HTML comments version won't be interactive. Also, I noticed that the iframe version includes some additional wrapper markup for rending in prevew that is not part of the actual component. That is also why your preview didn't look correct.

You can still use the stripAlpine transformer to remove the Alpine code if you end up not needing them in your components.

Hope this answers your question.

[connecteev]

@kiliman yes, this does answer the question. Thanks! I'll let you decide whether it makes sense to close this or leave open...since you have more knowledge about this than I do.