Tailwind CSS Classes

Tailwind CSS class .scale-0 / .scale-*

<div class="scale-0 transform bg-teal-400 p-4 m-6 inline-flex">0</div>
<div class="scale-50 transform bg-teal-400 p-4 m-6 inline-flex">50</div>
<div class="scale-75 transform bg-teal-400 p-4 m-6 inline-flex">75</div>
<div class="scale-90 transform bg-teal-400 p-4 m-6 inline-flex">90</div>
<div class="scale-95 transform bg-teal-400 p-4 m-6 inline-flex">95</div>
<div class="scale-100 transform bg-teal-400 p-4 m-6 inline-flex">100</div>
<div class="scale-105 transform bg-teal-400 p-4 m-6 inline-flex">105</div>
<div class="scale-110 transform bg-teal-400 p-4 m-6 inline-flex">110</div>
<div class="scale-125 transform bg-teal-400 p-4 m-6 inline-flex">125</div>
<div class="scale-150 transform bg-teal-400 p-4 m-6 inline-flex">150</div>

Preview

Are you tired of writing HTML by hand?

CSS source

.scale-0 {
    --transform-scale-x: 0;
    --transform-scale-y: 0;
}
.scale-50 {
    --transform-scale-x: .5;
    --transform-scale-y: .5;
}
.scale-75 { 
    --transform-scale-x: .75;
    --transform-scale-y: .75;
}
.scale-90 { 
    --transform-scale-x: .9;
    --transform-scale-y: .9;
}
.scale-95 {
    --transform-scale-x: .95;
    --transform-scale-y: .95;
}
.scale-100 {
    --transform-scale-x: 1;
    --transform-scale-y: 1;
}
.scale-105 {
    --transform-scale-x: 1.05;
    --transform-scale-y: 1.05;
}
.scale-110 {
    --transform-scale-x: 1.1;
    --transform-scale-y: 1.1;
}
.scale-125 {
    --transform-scale-x: 1.25;
    --transform-scale-y: 1.25;
}
.scale-150 {
    --transform-scale-x: 1.5;
    --transform-scale-y: 1.5;
}

More Tailwind CSS classes in Transform category

© 2024 Shuffle. All rights reserved.