Tailwind transition on after:background doesn't work

Question

I've got this mark up

<a class="group custom block transition delay-150 duration-1000 ease-in-out after:content-[''] after:block after:relative after:-mt-4 after:h-4 after:w-full after:rounded-b-lg after:bg-gradient-to-t after:from-black after:to-black/10 hover:after:bg-inherit " href="/"><div class="h-10 bg-transparent"><p class="text-center text-sm 2xl:text-base leading-4 tracking-tighter uppercase " >Test caption</p></div> <figure class="relative top-0 group-hover:-top-4 duration-300 ease-out" role="group"><img class="w-full aspect-16/10 object-cover rounded-lg" src="https://www.fillmurray.com/640/360" loading="lazy" alt=""></figure></a>

https://play.tailwindcss.com/ZyC3MXahrB

the transition between after:bg and hover:after:bg doesn't work

how to work it out?

Answer 1

Try to add after:transition-all in the <a> tag.

<script src="https://cdn.tailwindcss.com"></script>
<div class="flex">
  <div class="w-1/3 mx-auto">
  <a class="group custom block transition delay-150 duration-1000 ease-in-out after:content-[''] after:block after:relative after:-mt-4 after:h-4 after:w-full after:rounded-b-lg after:bg-gradient-to-t after:from-white after:to-white/10 hover:after:bg-red-400 after:transition-all" href="/">
    <div class="h-10 bg-transparent"><p class="text-center text-sm 2xl:text-base leading-4 tracking-tighter uppercase " >Test caption</p>
  </div>
  <figure class="relative top-0 group-hover:-top-4 duration-300 ease-out" role="group">
    <img class="w-full aspect-16/10 object-cover rounded-lg" src="https://www.fillmurray.com/640/360" loading="lazy" alt="">
  </figure>
  </a>
  </div>
</div>

Answer 2

The best way™ to render an ImageData upscaled is to create an ImageBitmap from it.
All modern browsers finally do support it (and if you need support for older browsers, I got you covered).

This will use a faster path to render the ImageData's content to a bitmap readily available to be painted by drawImage, theoretically a lot faster than the second best option of putting the ImageData on a canvas and redraw that canvas.

(async () => {
  // here I'll just make some noise in my ImageData
  const imagedata = new ImageData(100, 100);
  const arr = new Uint32Array(imagedata.data.buffer);
  for( let i = 0; i < arr.length; i++ ) {
    arr[i] = Math.random() * 0xFFFFFF + 0xFF000000;
  }
  // now to render it bigger
  const bitmap = await createImageBitmap(imagedata);
  const canvas = document.querySelector("canvas");
  const ctx = canvas.getContext("2d");
  ctx.imageSmoothingEnabled = false; // keep pixel perfect
  ctx.drawImage(bitmap, 0, 0, canvas.width, canvas.height);
})();

<canvas width="1000" height="1000"></canvas>