如何在 Tailwind CSS 中使用 HTML <picture> 标签

Question

如何将<picture>标签与 Tailwind CSS 一起使用？或者更具体地说，我如何在其中使用 Tailwind 的媒体查询？

<picture>
  <source media="(min-width:650px)" srcset="img_pink_flowers.jpg">
  <source media="(min-width:465px)" srcset="img_white_flower.jpg">
  <img src="img_orange_flowers.jpg" alt="Flowers" style="width:auto;">
</picture> 

Answer 1

通过添加 属性，您可以像其他 HTML 元素一样设置<picture>和元素的样式。要针对特定​​断点，请像平常一样在类前面加上等前缀。<img>classsm:

<picture class=""> <!-- Add Tailwind classes here -->
  <source media="" srcset="">
  <source media="" srcset="">
  <img src="" alt="" class="sm:w-auto"> <!-- Add Tailwind classes here -->
</picture> 

设置<picture>元素的样式将设置图像容器的样式，而元素上的类<img>将直接影响图像。