an example of css modules vs tailwind; why not both in some cases?

example.html

<template>
    <div class="app-wrapper">

        <app-header></app-header>
        
        <main class="main-content">
            <slot></slot>
        </main>

        <app-footer></app-footer>

    </div>
</template>

<style module>

    .app-wrapper {
        min-height: 100vh;
        display: grid;
        grid-template-rows: min-content 1fr min-content;
    }

    .main-content {
        display: flex;
        flex-direction: column;
    }

</style>

<!-- --------
---- OR -----
--------- -->

<template>
    <div class="min-h-screen grid grid-rows-[min-content_1fr_min-content]">

        <app-header></app-header>
        
        <main class="flex flex-col">
            <slot></slot>
        </main>

        <app-footer></app-footer>

    </div>
</template>