html - Iframe 响应顺风

Question

我正在尝试使用 tailwind 将 iframe 放入 div 中，但我不知道如何使 iframe 响应。

我需要使用什么样的类才能使以下内容正常工作？

<div class="min-h-screen bg-gray-50 py-6 flex flex-col justify-center relative overflow-hidden sm:py-12">
  <img src="/img/beams.jpg" alt="" class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 max-w-none" width="1308" />
  <div class="absolute inset-0 bg-[url(/img/grid.svg)] bg-center [mask-image:linear-gradient(180deg,white,rgba(255,255,255,0))]"></div>
  <div class="relative px-6 pt-10 pb-8 bg-white shadow-xl ring-1 ring-gray-900/5 sm:max-w-lg sm:mx-auto sm:rounded-lg sm:px-10">
    <iframe src="https://www.geogebra.org/calculator/zsnkxfmw?embed" width="800" height="600" allowfullscreen="" style="border: 1px solid #e4e4e4;border-radius: 4px;" frameborder="0"></iframe>
  </div>
</div>

Answer 1

有官方插件https://github.com/tailwindlabs/tailwindcss-aspect-ratio

// tailwind.config.js
module.exports = {
  theme: {
    // ...
  },
  corePlugins: {
    aspectRatio: false,
  },
  plugins: [
    require('@tailwindcss/aspect-ratio'),
    // ...
  ],
}

或者您可以引用https://tailwindcss.com/docs/aspect-ratio