我正在嘗試使用tailwindcss添加靜態顏色的圖像疊加。如果你檢查瀏覽器，父div只取圖像的大小，所以理想情況下，如果我使用w-full或h-full，before偽類應該取父div的高度和寬度。因為它也是div的子元素。但事實并非如此。

我只在css認為我可能在tailwindcss中犯了錯誤的情況下嘗試了它(因為我剛剛開始使用它)，但結果是一樣的。

<script src="https://cdn.tailwindcss.com"></script>
<div class="iniline before:content-{} before: inline before:absolute before:left-0 before:right-0 before:top-0 before:z-10 before:h-full before:w-full before:bg-fuchsia-600 before:opacity-30">
  <img src="//unsplash.it/201" alt="Image" class="relative z-0" />
</div>

考慮將& ltdiv & gt通過relative類應用position: relative創建位置父級。到& quot收縮包裝& quot圖像的寬度，您可以將width: max-content應用到& ltdiv & gt通過w-max。

<script src="https://cdn.tailwindcss.com"></script>

<div class="relative w-max before:absolute before:left-0 before:right-0 before:top-0 before:z-10 before:h-full before:w-full before:bg-fuchsia-600 before:opacity-30">
  <img src="http://unsplash.it/201" alt="Image" class="relative z-0" />
</div>