markusantonwolf/ta-gallery

Images not displaying with Tailwindcss JIT

jbajou opened this issue · 2 comments

jbajou commented

Hi,

I'm experiencing a bit of a trouble with ta-gallery (v.2.0.3) when using tailwindcss JIT (v2.1.2).
When disabling JIT, everything works properly, making me assume that I don't really have an issue with my markup.

Anyone has an idea in which direction I should look to fix this ?

Here is my markup just in case:

<div
                        x-cloak
                        class="mb-3 ta-gallery ta-gallery-aspect-hd"
                        x-data="taGallery()"
                        x-init="init()"
                        @checkout.window="init()"
                    >
                        @foreach ($product->productAttachments as $attachment)
                            <div class="rounded-lg ta-gallery-element">
                                <figure>
                                    <img src="{{ $attachment->media->url('embedded-product') }}" alt="{{ $attachment->caption }}" class="ta-gallery-image" loading="lazy" x-ref="height" />
                                    <figcaption class="px-4 py-1 text-sm font-semibold text-white bg-gray-900 bg-opacity-25 ta-gallery-image-caption bg-blur-2">
                                        {{ $attachment->caption }}
                                    </figcaption>
                                </figure>
                            </div>
                        @endforeach

                        <button
                            type="button"
                            class="flex items-center justify-center w-10 h-10 bg-opacity-75 border-2 rounded-full shadow-xl hover:text-white hover:border-white text-turquoise border-turquoise bg-gray-dark ta-gallery-button -left-5 sm:left-2 focus:ring focus:ring-primary"
                            x-on:click="previous()"
                            x-show="loaded"
                        ><x-heroicon-o-chevron-left class="w-6 h-6" /></button>
                        <button
                            type="button"
                            class="flex items-center justify-center w-10 h-10 bg-opacity-75 border-2 rounded-full shadow-xl hover:text-white hover:border-white text-turquoise border-turquoise bg-gray-dark ta-gallery-button -right-5 sm:right-2 focus:ring focus:ring-primary"
                            x-on:click="next()"
                            x-show="loaded"
                        ><x-heroicon-o-chevron-right class="w-6 h-6" /></button>
                        <!--- END BUTTONS /-->
                    </div>

Thanks in advance

markusantonwolf commented

@jbajou - Thanks for your issue. I was able to reproduce it and I found the reason for this situation.

The actual JIT compiler does have some known limitations: Advanced PurgeCSS options like safelist aren't supported yet since we aren't actually using PurgeCSS. We'll add a way to safelist classes for sure though. For now, a safelist.txt file somewhere in your project with all the classes you want to safelist will work fine.

https://github.com/tailwindlabs/tailwindcss-jit#known-limitations

Solution

Add a file named "safelist.txt" e.g. in the root of your project and add the following classes into the file:

ta-gallery-element-active ta-gallery-anim-right-in ta-gallery-anim-right-out ta-gallery-anim-left-in ta-gallery-anim-left-out

Safe it and it will work...