What about a helper function for that? Something like this:

    const md = styles => styles.split(' ').map(style => 'md:' + style).join(' ')

Then

    const styles = [
        'w-16 h-16 px-2 py-1 m-1 text-sm text-white bg-black rounded',
        md('w-32 h-32 rounded-md text-base hover:rounded-xl')
    ].join(' ');

Then

    <div className={styles}>Hello</div>

I haven't actually tried this approach but it might clean some things up.