tailwind width 100 code example

Example 1: tailwind height

<div>
    <div class="h-8 ..."></div>
    <div class="h-12 ..."></div>
    <div class="h-16 ..."></div>
    <div class="h-24 ..."></div>
</div>
<!-- 
h-10	height: 2.5rem;
h-11	height: 2.75rem;
h-12	height: 3rem;
h-14	height: 3.5rem;
h-16	height: 4rem;
h-20	height: 5rem;
h-24	height: 6rem;
h-28	height: 7rem;
h-32	height: 8rem;
h-36	height: 9rem; 
-->

Example 2: tailwind extend height

module.exports = {
    theme: {
        // ....
        extend: {
            height: {
                sm: '20rem'
            }
        }
        // ...
    }
}

// Generates h-sm with 20rem height

Tags:

Html Example