Is there a way to do a minimum margin in tailwind similar to w-min, I can't find it in the docs. I am looking for the margin to be 1/5 of the screen but a minimum of 12 (units).

Is there a way to do a minimum margin in tailwind similar to w-min, I can't find it in the docs. I am looking for the margin to be 1/5 of the screen but a minimum of 12 (units).

• javascript
• html
• css
• reactjs
• tailwind-css

1 Answer 1

You can use arbitary values to specify the max() value.

e.g.) According to your spec, 1/5 of the screen is 20vw (or 20vh for height). and 12 units (guessing in pixels?) as 12px.

If you do, mx-[max(20vw,12px)], it will generate the following rule,

.mx-\[max\(20vw\2c 12px\)\] {
  margin-left: max(20vw,12px);
  margin-right: max(20vw,12px);
}

max() lets you choose whichever is bigger.
So if 20vw is less than 12px, then 12px margin will be used, and vice versa.

You can use all variations of margin utilities such as m-*, my-*, m[lrtb]-* as well.