how to add custom 26rem value in max-height on tailwindcss

Question

I'm able to get up to 24rem on max-height using tailwindcss, but not 26rem. How would I add this value? I was not able to find information on how to do this in the docs: https://tailwindcss.com/docs/max-height . The only value-related changes I can find are for adding scale. Thank you!

Answer 1

You could add it manually on tailwind.config.js and recompile it

 theme: {
    extend: {
      height: {
        100: '24rem',
      },
    },
 },

therefore, you can use class max-h-100 on your class list.

Answer 2

You have two options:

1. You can add the values directly inside your class names like so: follow the link

<div class="h-[250px] w-[30rem] absolute top-[1rem] ..."></div>

2. the second approach is by using config file which locates in your project root directory: <<tailwind.config.js>>: follow the link

module.exports = {
          theme: {
            extend: {
              height: {
                '128': '32rem',
              }
            }
          }
        }