Как бы то ни было, чтобы настроить или «горячую» клавишу для элемента в Tailwind?

Question

Я только начал использовать Tailwind, и он мне очень понравился по сравнению с традиционным CSS. Но я заметил, что мне приходится многократно вводить определенные настройки в процессе кодирования моего JSX-кода.

Мне интересно, есть ли способ сократить эту задачу или более эффективно писать коды попутного ветра?

В настоящее время у меня есть следующее, которое, как я обнаружил, повторялось много раз: . есть ли способ сделать его горячим или определить его где-нибудь как тогда мне нужно только позвонить когда мне это нужно?

Полный пример ниже:

      <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>