如何使页面适应顺风？

Question

我有一个带有以像素为单位的登录表单的 figma 设计模板：

.form { 
  position: relative;
  width: 632px;
  height: 1280px;
}

.row {
  display: grid;
  grid-column-template: 50% 50%
}

<div class="form">
    <div class="row">
        <div><label>Name</labe><input></div>
        <div><label>Second Name</labe><input></div>
    </div>
</div>

因此，我需要将最大宽度设置为 .form 以避免整页调整输入表单的大小。现在是width: 632px;设计（竖版）。

如何顺风重写这个？在阅读 container 部分的文档后，我没有找到 width: 632px; 的宽度。只有：

container   None    width: 100%;
sm (640px)  max-width: 640px;
md (768px)  max-width: 768px;
lg (1024px) max-width: 1024px;
xl (1280px) max-width: 1280px;
2xl (1536px)    max-width: 1536px;

那么，如何使用 tailwind 使表单自适应？

Answer 1

您可以覆盖（“配置”）您在 tailwind 配置文件中为容器发布的默认间距。

https://tailwindcss.com/docs/customizing-spacing#overriding-the-default-spacing-scale

要完全“覆盖”，可以修改theme.spacing。

module.exports = {
  theme: {
    spacing: {
      sm: '634px',
      md: '...',
      lg: '...',
      xl: '...',
    }
  }
}

如果你想“extend”（或者只覆盖你想要的那些，在你的情况下，sm）你可以改变 theme.extend.spacing 如下所示。

module.exports = {
  theme: {
    extend: {
    spacing: {
      sm: '634px'
    }
  }
}

这只会将 sm: 更改为 634px，同时保持其他（md、lg 等）不变（如 Tailwind CSS 所定义）。

如何使页面适应顺风？

How to make page adaptive in tailwind?

html

css

tailwind-css

tailwind-ui

tailwind-3