How to add custom max-height classes in tailwindcss?

HTML-CSS
1

With laravel8/tailwindcss 2 looking at
https://tailwindcss.com/docs/max-height#class-reference

    max-h-80	max-height: 20rem;
    max-h-96	max-height: 24rem;
    max-h-full	max-height: 100%;
    max-h-screen	max-height: 100vh;

I need to add custom class with different max-height
like 34rem, 44rem depending on current devices.

How to implement it ?

Thanks in advance!

2

Looking at @layer utilities described here :

I try to define in resources/css/app.css:

@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';

/*max-h-80    max-height: 20rem;*/
/*max-h-96    max-height: 24rem;*/
/*max-h-full  max-height: 100%;*/
/*max-h-screen    max-height: 100vh;*/
/*I need to add custom class with different max-height like 34rem, 44rem depending on current devices.*/
@layer utilities {

    .custom_height_sm {
        height:  34rem;
    }
}

@layer base {
    .d1 {
        @apply border-2 border-red-600;
    }

    .custom_height {
        @apply sm:custom_height_sm  md:custom_height_md d1 ;
    }

But I got error in the console :

resources/css/app.css The `sm:custom_height_sm` class does not exist. If you're sure that `sm:custom_height_sm` exists, make sure that any `@import` statements are being properly processed before Tailwind CSS sees your CSS, as `@apply` can only be used for classes in the same CSS tree.

  34 | 
  35 |     .custom_height {
> 36 |         @apply sm:custom_height_sm  md:custom_height_md d1 ;
     |                ^
  37 |     }
  38 |

Which way is valid ?

3

I haven’t really used Tailwind all that much but can’t you just extend the maxHeight class and use the new classes on the elements.

1 Like
4

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.