Misc utilities

Some misc utilities that might help you...

Class name

@apply

.grid-default

@apply grid grid-cols-1 sm:grid-cols-2 xl:grid-cols-3 2xl:grid-cols-4

.f-col

@apply flex flex-col

.f-row

@apply flex flex-row

.-f-col

@apply flex flex-col-reverse

.-f-row

@apply flex flex-row-reverse

.middle-center

@apply my-auto mx-auto

.in-top

@apply absolute inset-x-0 top-0

.top-right

@apply absolute top-0 right-0

.top-left

@apply absolute left-0 top-0

.in-bottom

@apply absolute inset-x-0 bottom-0

.bottom-right

@apply absolute bottom-0 right-0

.bottom-left

@apply absolute left-0 bottom-0

.in-left

@apply absolute inset-y-0 left-0

.in-right

@apply absolute inset-y-0 right-0

.in-all

@apply absolute inset-0

.pill

@apply px-4 rounded-full

.disabled

@apply filter brightness-75

.clickeable

@apply filter active:brightness-90 transition-transform transform active:scale-110 focus:outline-none cursor-pointer

.clickeable-shrink

@apply filter active:brightness-90 transition-transform transform active:scale-90 focus:outline-none cursor-pointer

.middle-center

@apply my-auto mx-auto

.image-fill

@apply object-fill size-full

.flippable-icon

@apply square-6 transition-transform transform duration-150 ease-in-out

.loading

@apply animate-pulse p-2 middle-center cursor-wait

.copyable

@apply clickeable select-all

.flip-y

transform: "scaleY(-1)"

.flip-x

transform: "scaleX(-1)"

.ghost-outline

@apply ghost border-2 bg-opacity-0 hover:bg-opacity-100

.ghost

@apply transition duration-150 ease-in-out

.animate-gradient-x

animation: "gradient-x 10s ease-in-out infinite"

.animate-gradient-y

animation: "gradient-y 10s ease-in-out infinite"

.animate-gradient-xy

animation: "gradient-xy 10s ease-in-out infinite"