How to set max width as a percentage or static value

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

You need customize tailwind.config.js

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

So, you got fixed max width to a percentage or px.

Why is this?

You are not limited in settings and capabilities, on the contrary, the Tailwind CSS provides you with a standard that has proven itself in practice.

But if you need fine tuning for your project, you can always do it.

Enjoy using Tailwind CSS!

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%',
      }
    }
  }
}

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>