javascript - Minimum Margin in Tailwind - Stack Overflow

admin管理员组

文章数量:1336089

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

Share Follow asked Mar 23, 2022 at 0:00 Michael ThomasMichael Thomas 6811 silver badge1010 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 9

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.

本文标签： javascriptMinimum Margin in TailwindStack Overflow