'How to make page adaptive in tailwind?

I have a figma design template with login form in pixels:

.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>

So, I need to set max width to .form to avoid input form resizing by full page. Now it is width: 632px; in design (vertical form).

How to rewrirte this on tailwind? After reading doc in section container I did not find width for width: 632px;. There are only:

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;

So, how to make form adaptive using tailwind?

htmlcsstailwind-csstailwind-uitailwind-3


Solution 1:[1]

You can override("configure") default spacing you posted for the container in your tailwind configuration file.

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

To completely "override", you can modify theme.spacing.

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

If you want to "extend" (or override only the ones you want to, in your case, sm) you can change theme.extend.spacing as shown below.

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

This will only change sm: to 634px while leaving others (md, lg, etc) intact (as Tailwind CSS defined).

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 dance2die

Related Questions