MatteoGabriele/vue-progressive-image

Rendered image does not retain tailwind class

amecreate opened this issue · 1 comments

Description

Template without plugin:

<img alt="gallery" class="block object-cover object-center w-full h-full" src="#">

Template with plugin:

<ProgressiveImage alt="gallery" custom-class="block object-cover object-center w-full h-full" :placeholder-src="#" :src="#" />

HTML without plugin:

<img class="block object-cover object-center w-full h-full" src="#" alt="gallery" style="">

HTML with plugin:

<div class="v-progressive-image block object-cover object-center w-full h-full" data-v-263c1f8c="" style="max-width: 4000px;">
<div style="padding-bottom: 75%;">
<img class="v-progressive-image-main" src="#" alt="gallery" style=""><!----><!----></div></div>

Expected behavior

Placeholder image and rendered image both retain the tailwind classes.

Actual behavior

Only placeholder image retains tailwind classes. Actual rendered image does not have the tailwind classes, which were incorrectly placed to the div.

img class="block object-cover object-center w-full h-full"
v.s.
img class="v-progressive-image-main"

Environment

vue-progressive-image@4.0.0
MacOS
Safari

Thank you!

@amecreate I'm sorry, but I must have missed this one. This library doesn't allow customization at that level using Tailwind. You can manage some CSS variables and target elements, but the custom-class prop is added to the root element. You should use Tailwind @apply method in a more traditional CSS fashion.