What about a helper function for that? Something like this: const md = styles => styles.split(' ').map(style => 'md:' + style).join(' ') Then const s

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.