Tailwind Min-Height not working properly

I have a Laravel project (created using the Breeze starter kit) and am using Tailwind successfully, mostly, throughout my blade template files. However, I'm unable to use the min-h-* utilities - though I'm able to use min height arbitrary values and max-h-* utilities work fine.

So, within the following code snippet min-h-16 has no effect on the height of the button. And on examining the app.css file within the source section of the Chrome dev tools, min-h-16 is not present.

Whereas min-h-[64px] in the following works as expected. And on examining the app.css file within the dev tools, min-h-[64px] is present, as expected...

.min-h-[64px] { min-height: 64px; }

<div>
   <button class="m-2 inline-flex min-h-16 cursor-pointer items-center rounded-md border-b-2 border-transparent bg-gray-200 p-2 text-sm text-gray-500 transition duration-150 ease-in-out hover:bg-gray-300 hover:text-gray-700 focus:text-gray-700">
      <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit...</div>
   </button>
</div> 

<div>
   <button class="m-2 inline-flex min-h-[64px] cursor-pointer items-center rounded-md border-b-2 border-transparent bg-gray-200 p-2 text-sm text-gray-500 transition duration-150 ease-in-out hover:bg-gray-300 hover:text-gray-700 focus:text-gray-700">
       <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit...</div>
   </button>
</div>

What might be causing this problem?

Thank you in advance for any assistance or insights you can provide.

rvdiwas

2 years ago

Level 7

can you post your tailwind.config.js file ?

penumbra555

2 years ago

Level 1

Thanks for your reply. Here is the tailwind.config.js file...

import defaultTheme from 'tailwindcss/defaultTheme';
import forms from '@tailwindcss/forms';

/** @type {import('tailwindcss').Config} */
export default {
    content: [
        './vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php',
        './storage/framework/views/*.php',
        './resources/views/**/*.blade.php',
        './resources/js/display-items/*.js',
    ],

    theme: {
        extend: {
            fontFamily: {
                sans: ['Figtree', ...defaultTheme.fontFamily.sans],
            },
        },
    },

    plugins: [forms],
};

Please or to participate in this conversation.