Overflow-x-auto Affects CSS Text Shadow

Question

I need your assistance. In short, "text-shadow" won't work if it has "overflow-x-auto".

I'm currently working on creating a posts list for my blog,

and I'm facing an issue with the "text-shadow" property when combined with "overflow-x-auto".

When I apply 'overflow-x-auto' to truncate long descriptions, the 'text-shadow' behaves differently, not as expected.

I'm using Tailwind CSS, and here's my code snippet:

<div
        className={`mt-1 grid grid-cols-[2fr,1fr] items-center justify-between gap-1 hover:text-white hover:text-shadow-away group-hover:text-white group-hover:text-shadow-away`}
      >
        <div
          className={`mt-1 box-border overflow-x-auto text-ellipsis whitespace-nowrap text-[#767676] group-hover:text-white`}
        >
          {description}
        </div>
  {/* Rest of the code is omitted */}
</div>

Images depicting the current issue

Text shadow behaving like box shadow

Text Shadow as I Intended

I'd appreciate any guidance on how to resolve this issue. Thank you!

Answer 1

I just resolved it. The shadow was getting cut off. Adding appropriate padding fixes the issue. Adding appropriate padding