Images not displaying with Tailwindcss JIT
jbajou opened this issue · 2 comments
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
@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...
@jbajou ... the updated documentation: https://ta-styled-plugins.com/ta-gallery/tailwind-css-plugin/