从 CSS 到顺风让步，“vw”和“50%”在流程中包含完整图像

Question

我想在顺风中重现：https://codepen.io/chriscoyier/pen/xOjaYA 特别是这部分代码：

.full-width {
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
}

知道如何实现这一目标吗？

Answer 1

如果您已在tailwind.config.jsmode: 'jit'中启用，则可以使用您想要的任何 css，而无需更改配置。

例如： className="m-[-50vw] w-[100vw]"

更多详细信息：https://tailwindcss.com/docs/just-in-time-mode