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

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!

Answer 2

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 3

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

Answer 4

You can set percentage values like this in tailwind.config.js file

module.exports = {
  theme: {
    extend: {
      maxWidth: {
        50: '50%',
        60: '60%',
        70: '70%',
        80: '80%',
        90: '90%',
        // 100% is not required as max-w-full will be present by default
      }
    }
  }
}

Then in the mark up you can use it this way

   <div className="max-w-90">
      View Product
   </div>

Note: If it doesn't work, make sure you restart the local server, yarn dev