How to make page adaptive in tailwind?

Question

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?

You don't _have_ to use the tailwind classes and just use standard CSS for cases like this, or define your own class set. See the [docs](https://tailwindcss.com/docs/configuration) for more context. — Phix, Mar 23 '22 at 16:56
Okay, I can determice own classed but how integrate it in tailwind to use as kit? — , Mar 23 '22 at 19:38

score 0 · Accepted Answer · answered Mar 24 '22 at 03:18

0

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

answered Mar 24 '22 at 03:18

dance2die

35,807
39
131
194

I still can not get how to be if I have custom design from Figma. It has customized buttons (padding,sizes, etc). There is no predefined properties in Tailwind. Does it mean I must define own schma color, padding, sizes etc? Why then I have to use Tailwind if I do it by handmade from scratch? Could you share a good example how to apply Tailwind for custom design? – Mar 24 '22 at 16:27
I am not sure if there is a tool to convert Figma CSS to Tailwind utilities. You'd need to "extend" or "override" from the theme (padding/margin/colors, etc) to match those in Figma. My [website](https://sung.codes) is built based on Material Design. And you can check the config [here](https://gist.github.com/dance2die/5ff2d2d3c6c77883df328fcd57baa60c) (full source not available due to sensitive info). – dance2die Mar 25 '22 at 00:27

How to make page adaptive in tailwind?

1 Answers1