How to extend existing class

[mkfizi]

I'm having trouble to understand on how to add properties to existing class.

Example: Current min-h-screen is defined as below:

.min-h-screen {
  min-height: 100vh;
}

I want to add an additional property to cater the notorious vh bug on mobile as below:

.min-h-screen {
  min-height: 100vh;
  /* additional property */
  height: calc(var(--vh, 1vh) * 100);
}

How do I extend existing class property? I've tried to follow the documentation and made my tailwind.config.js as below:

theme: {
        extend: {
            minHeight: {
                'screen': 'calc(var(--vh, 1vh) * 100)',
            }
        }
    },

However, when the css file is render, min-h-screen is override instead as below:

.min-h-screen {
  min-height: calc(var(--vh, 1vh) * 100);
}

How do I add property as I intended without overriding current class property?

Edit

I've update my tailwind.config.js as below:

theme: {
        extend: {
            minHeight: {
                'screen': ['100vh', 'calc(var(--vh, 1vh) * 100)'],
            }
        }
    },

And it produces the result as intended. However is this the correct method to do it?

[it02Inartec]

Can anyone answer this? I need to do the exact same thing, but in my case, the class has many different styles.

[wongjn]

In v4 at least, you can do:

@utility existing-classname {
  /* properties go here */
}