Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Rendered image does not retain tailwind class #94

Open
amecreate opened this issue Aug 7, 2022 · 1 comment
Open

Rendered image does not retain tailwind class #94

amecreate opened this issue Aug 7, 2022 · 1 comment

Comments

@amecreate
Copy link

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!

@MatteoGabriele
Copy link
Owner

MatteoGabriele commented Jul 23, 2024

@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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants