Styling issues and inconsistencies after crawler completes

[connecteev]

I'm not sure if it's just me, but I'm seeing quite a few inconsistencies between the tailwindui code and the one the crawler creates.

1. Comparing https://tailwindui.com/components/application-ui/forms/form-layouts What I SHOULD be seeing: https://www.webpagescreenshot.info/#v2=2W7aOzUVq What I am seeing (on localhost): https://www.webpagescreenshot.info/#v2=eKFvEvtOY

2. Comparing https://tailwindui.com/components/marketing/elements/flyout-menus What I SHOULD be seeing: https://www.webpagescreenshot.info/#v2=uSqQgzqDM What I am seeing (on localhost): https://www.webpagescreenshot.info/#v2=OSF15rftp

Here's my .env file:

EMAIL=
PASSWORD=
OUTPUT=../tailwindui_output
BUILDINDEX=1
HTMLMODE=alpine
TRANSFORMERS=addTailwindCss,prefixSrc,useInter,prefixClasses,convertVue,stripAlpine
VUE_OUTPUT=$OUTPUT/vue
STRIPALPINE_OUTPUT=$OUTPUT/no-alpine

# changeColor
#CHANGECOLOR_TO=red

# changeLogo
#CHANGELOGO_URL=https://upload.wikimedia.org/wikipedia/commons/thumb/e/e7/Instagram_logo_2016.svg/1200px-Instagram_logo_2016.svg.png

# addTailwindCss. This setting is needed if you have prefixClasses enabled
# Note: This config file does not get auto-generated. Please make sure it already exists.
ADDTAILWINDCSS_URL=/tailwind.css

# prefixClasses
PREFIXCLASSES_PREFIX=tw-

Btw @kiliman I did compare the source code, and it looks like the tailwindui code includes styles from this extra css file. Not sure what to make of it. https://tailwindui.com/css/iframe.css?id=a05cfc4bbf6c64e1422e

[kiliman]

Yes, there is an issue with the current version of the crawler. The main problem is that the "preview" version on TailwindUI.com isn't an exact copy of the component source. That is, Adam adds some additional markup (including AlpineJS) to make the component look better for preview.

The current crawler pulls either the preview version or HTML comments version depending on HTMLMODE and tries to strip away some of this additional markup but doesn't always get it right.

Anyway, v3 of the crawler will now download and persist the preview version as well as the HTML comments version independent of the transformer. It will also always show the the preview version in your local copy (so it should look identical to the online version). Also, when selecting the Code button, it will always show the HTML comments version. Note, the transformed code will be stored separately in $OUTPUT/transform folder.

See #28 for more details

I haven't seen any differences in the preview version even without their iframe.css (I always include the latest CDN version of tailwindui.css)

Here are screenshots of the V3 implementation.

[connecteev]

@kiliman thank you for the detailed response, makes a lot of sense.

The main problem is that the "preview" version on TailwindUI.com isn't an exact copy of the component source. That is, Adam adds some additional markup (including AlpineJS) to make the component look better for preview.

I'm not asking you to answer this one, but I'm just confused why Adam had to do this in the first place.

In any case, the new v3 screenshots look great! Any idea when it will be released (or maybe perhaps this fix)? Thanks!

[kiliman]

People were complaining about having to remove the AlpineJS code when converting to React, Vue, etc. Also, apparently the AlpineJS isn't fully accessible, so people were complaining about that it not being "best practice" etc. So Adam just decided to ditch it altogether and only use it to show interactivity in preview. People are always complaining about one thing or another. That's why we can't have nice things.

Anyway, I hope to have the v3 updates done sometime this week. Just finishing up the local config workflow and ability to run transformers from the preview (like change colors, logos, etc. directly from the local preview site).

Then v3.next will add transformers for React and Vue transitions. I'm using more Tailwind UI components, so it gives me motivation to finish these up so I don't have to keep doing them by hand.

[connecteev]

People are always complaining about one thing or another. That's why we can't have nice things.

I agree!

@kiliman v3 sounds awesome. Can't wait to start using it :)

[divine]

@kiliman any update on v3?

Thanks!

[kiliman]

Cleaning up issues.

Closed. v3.0 was deployed a while ago. It now downloads component files cleanly and a separate preview download which is an exact copy of the Tailwind UI website.