How to set max width as a percentage or static value

Question

For width on an element with tailwind you can set it by a percentage or fixed rem value. For setting max-width you can only set it to the size of a breakpoint.

Why is this?

Is there any way to set max-width to a percentage or a fixed size that isn't a breakpoint?

Answer 1

Yes, in your theme as described in the answers above.

BUT, from the v3 docs, "…If you need to use a one-off max-width value that doesn’t make sense to include in your theme, use square brackets to generate a property on the fly using any arbitrary value…"

<div class="max-w-[50%]">
  <!-- ... -->
</div>

Answer 2

the answer of Dmitry is correct, but beware:

If you do it like he mentioned, none of the maxWidth values will work, except the values in the configuration. If you want to just extend the base maxWidth values (provided by tailwind), you have to put the configuration inside the extend section like so:

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      maxWidth: {
        '1/4': '25%',
        '1/2': '300px',
        '3/4': '75%',
      }
    }
  }
}