No prefixes are added for space-y-* and space-x-*

[connecteev]

See the "Avatar group stacked bottom to top" component at http://localhost:5000/components/application-ui/elements/avatars

Notice that no prefixes are added for: space-y-6 sm:space-y-0

            <div class="space-y-6 sm:space-y-0 sm:tw-flex tw-justify-around tw-items-end tw-w-full tw-max-w-lg tw-mx-auto">
              <div class="tw-flex tw-relative tw-z-0 tw-overflow-hidden">
                <img class="tw-relative tw-z-30 tw-inline-block tw-h-8 tw-w-8 tw-rounded-full tw-text-white tw-shadow-solid" src="https://images.unsplash.com/photo-1491528323818-fdd1faba62cc?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=facearea&amp;facepad=2&amp;w=256&amp;h=256&amp;q=80" alt="">
                <img class="tw-relative tw-z-20 tw--ml-2 tw-inline-block tw-h-8 tw-w-8 tw-rounded-full tw-text-white tw-shadow-solid" src="https://images.unsplash.com/photo-1550525811-e5869dd03032?ixlib=rb-1.2.1&amp;auto=format&amp;fit=facearea&amp;facepad=2&amp;w=256&amp;h=256&amp;q=80" alt="">
                <img class="tw-relative tw-z-10 tw--ml-2 tw-inline-block tw-h-8 tw-w-8 tw-rounded-full tw-text-white tw-shadow-solid" src="https://images.unsplash.com/photo-1500648767791-00dcc994a43e?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=facearea&amp;facepad=2.25&amp;w=256&amp;h=256&amp;q=80" alt="">
                <img class="tw-relative tw-z-0 tw--ml-2 tw-inline-block tw-h-8 tw-w-8 tw-rounded-full tw-text-white tw-shadow-solid" src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=facearea&amp;facepad=2&amp;w=256&amp;h=256&amp;q=80" alt="">
              </div>
            </div>

This probably also is an issue with https://github.com/vesper8/vue-tailwind-prefix-applicator/

[kiliman]

Right now, the prefixClasses transformer uses a static list of tailwind classes. I need to update it. When I add #16, it can generate this list directly from your CSS.

[connecteev]

@kiliman makes sense, thanks for clarifying!

[kiliman]

As a workaround, you can edit the file transformers/prefixClasses/tailwind-classes.js and add in the space-* classes (probably just copy the padding or margin classes and do a find+replace).

Then re-run the crawler.

Feel free to send me a PR with your changes 😆

[connecteev]

@kiliman Interesting...I dont see any space-* classes defined on https://tailwindcss.com/docs OR even in the main tailwindcss source file: https://unpkg.com/tailwindcss@1.2.0/dist/tailwind.css

Maybe this isn't a bug after all? So then where are these classes coming from after running the crawler? I do see them in the iframe (view source of https://tailwindui.com/components/application-ui/elements/avatars).

[kiliman]

Actually, I believe it's a new feature that Adam is working on.

https://twitter.com/adamwathan/status/1250582286803795969

[connecteev]

Interesting, so space-y and divide-y are possibilities. What about space-x and divide-x? And all the color variants of divide- as in the tweet? Maybe we should wait until this new feature gets defined 😆

[kiliman]

Yeah, those space* classes are still not part of the default Tailwind UI. He's including it in the preview version which includes some wrappers for preview only. If you look at the Code version on the website, you'll see that the avatar components don't include the wrapper. So it's not an issue for now, but I'll make sure that the class list is kept up to date.

[connecteev]

Makes sense...I'm amazed at how well-informed you are.

[connecteev]

@kiliman 1.3.0 was just released https://github.com/tailwindcss/tailwindcss/releases/tag/v1.3.0

[vesper8]

I just submitted a PR with the new classes from 1.4 (and some that were missing from 1.3)

[kiliman]

Once I finish #16 and generate the CSS from the tailwind config, we can also generate the class list for the prefix transformer at build time. This way it's as current as their config is.

[vesper8]

Currently, the way I extract the list of all possible tailwind classes is by manually downloading https://cdn.jsdelivr.net/npm/@tailwindcss/ui@latest/dist/tailwind-ui.css and https://unpkg.com/tailwindcss@%5E1.0/dist/tailwind.css and then manually editing each of those files to remove the normalize.css as well as a few other things. And then I feed it to my PHP extractor file which cleans out a whole lot of suffixes and prefixes and other CSS artifacts and produces a clean list of tailwind classes. I'm not sure how you could do that at build time but I'd be interested to know!

[kiliman]

I basically converted your PHP code into JavaScript. So if there is a tailwind.config.js file, there would be a build phase, where it generates the full CSS. Then if the transformers include the prefixTransformer, the extract phase would extract the list of classes needed by the transformer. We could optimize this by generating a hash of the CSS file and storing that and only generating the class list if the hash changes.

Anyway, I would also probably add a purgeCss phase so that the preview pages would only have the CSS that were actually used.

I've already done all of these to some extent. I just haven't put them together into a nice workflow for the crawler.