Anyway to customise or hotkey an element in Tailwind? - html

Question

I just started using Tailwind and I liked it very much over traditional CSS. But I noticed that I have to repeatedly type in certain settings over the course of coding my JSX code.
I am wondering, is there anyway to shorten this task or more efficiently write Tailwind codes?
Currently I have the following - which I found to repeated itself many times: flex justify-center items-center. is there a way to hotkey it or define it somewhere as flex-center = flex justify-center items-center then I only need to call flex-center whenever I need it?
Full example below:
<template>
<div id="footerContainer" class="object-bottom">
<footer id="container" class="w-full h-12 lg:h-32 grid grid-rows-1 md:grid-cols-4 font-sans">
<!-- Mobile component -->
<div class="w-full h-full flex items-center md:hidden">
<div id="footbar" class="container grid gap-2 grid-cols-5 mb-2">
<div class="flex justify-center items-center">Home</div>
<div class="flex justify-center items-center">Sell</div>
<div class="flex justify-center items-center">post</div>
<div class="flex justify-center items-center">chat</div>
<div class="flex justify-center items-center"><ChatIcon class="h-6 w-6 text-gray-500" /></div>
</div>
</div>
</footer>
</div>
</template>
<script>
export default {
name: "FooterComponentv2",
};
</script>
<style scoped>
* {
border: 1px solid red;
}
</style>