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.