1
1
mirror of https://github.com/namibia/awesome-cheatsheets.git synced 2024-12-20 09:10:48 +00:00

docs(tailwind): sizing

This commit is contained in:
Julien Le Coupanec 2020-03-29 15:46:31 +02:00
parent 087b076040
commit 90fd9e5872

View File

@ -955,45 +955,144 @@
/* /*
* Width * Width
* -------------------- * --------------------
* * Utilities for setting the width of an element
* * By default, only responsive variants are generated for width utilities.
*/ */
.w-0 /* width: 0; */
.w-1 /* width: 0.25rem; */
.w-2 /* width: 0.5rem; */
.w-3 /* width: 0.75rem; */
.w-4 /* width: 1rem; */
.w-5 /* width: 1.25rem; */
.w-6 /* width: 1.5rem; */
.w-8 /* width: 2rem; */
.w-10 /* width: 2.5rem; */
.w-12 /* width: 3rem; */
.w-16 /* width: 4rem; */
.w-20 /* width: 5rem; */
.w-24 /* width: 6rem; */
.w-32 /* width: 8rem; */
.w-40 /* width: 10rem; */
.w-48 /* width: 12rem; */
.w-56 /* width: 14rem; */
.w-64 /* width: 16rem; */
.w-auto /* width: auto; */
.w-px /* width: 1px; */
.w-1/2 /* width: 50%; */
.w-1/3 /* width: 33.333333%; */
.w-2/3 /* width: 66.666667%; */
.w-1/4 /* width: 25%; */
.w-2/4 /* width: 50%; */
.w-3/4 /* width: 75%; */
.w-1/5 /* width: 20%; */
.w-2/5 /* width: 40%; */
.w-3/5 /* width: 60%; */
.w-4/5 /* width: 80%; */
.w-1/6 /* width: 16.666667%; */
.w-2/6 /* width: 33.333333%; */
.w-3/6 /* width: 50%; */
.w-4/6 /* width: 66.666667%; */
.w-5/6 /* width: 83.333333%; */
.w-1/12 /* width: 8.333333%; */
.w-2/12 /* width: 16.666667%; */
.w-3/12 /* width: 25%; */
.w-4/12 /* width: 33.333333%; */
.w-5/12 /* width: 41.666667%; */
.w-6/12 /* width: 50%; */
.w-7/12 /* width: 58.333333%; */
.w-8/12 /* width: 66.666667%; */
.w-9/12 /* width: 75%; */
.w-10/12 /* width: 83.333333%; */
.w-11/12 /* width: 91.666667%; */
.w-full /* width: 100%; */
.w-screen /* width: 100vw; */
/* /*
* Min-Width * Min-Width
* -------------------- * --------------------
* * Utilities for setting the minimum width of an element
* * By default, only responsive variants are generated for min-width utilities.
*/ */
.min-w-0 /* min-width: 0; */
.min-w-full /* min-width: 100%; */
/* /*
* Max-Width * Max-Width
* -------------------- * --------------------
* * Utilities for setting the maximum width of an element
* * By default, only responsive variants are generated for max-width utilities.
*/ */
.max-w-xs /* max-width: 20rem; */
.max-w-sm /* max-width: 24rem; */
.max-w-md /* max-width: 28rem; */
.max-w-lg /* max-width: 32rem; */
.max-w-xl /* max-width: 36rem; */
.max-w-2xl /* max-width: 42rem; */
.max-w-3xl /* max-width: 48rem; */
.max-w-4xl /* max-width: 56rem; */
.max-w-5xl /* max-width: 64rem; */
.max-w-6xl /* max-width: 72rem; */
.max-w-full /* max-width: 100%; */
.max-w-screen-sm /* max-width: 640px; */
.max-w-screen-md /* max-width: 768px; */
.max-w-screen-lg /* max-width: 1024px; */
.max-w-screen-xl /* max-width: 1280px; */
.max-w-none /* max-width: none; */
/* /*
* Height * Height
* -------------------- * --------------------
* * Utilities for setting the height of an element
* * By default, only responsive variants are generated for height utilities.
*/ */
.h-0 /* height: 0; */
.h-1 /* height: 0.25rem; */
.h-2 /* height: 0.5rem; */
.h-3 /* height: 0.75rem; */
.h-4 /* height: 1rem; */
.h-5 /* height: 1.25rem; */
.h-6 /* height: 1.5rem; */
.h-8 /* height: 2rem; */
.h-10 /* height: 2.5rem; */
.h-12 /* height: 3rem; */
.h-16 /* height: 4rem; */
.h-20 /* height: 5rem; */
.h-24 /* height: 6rem; */
.h-32 /* height: 8rem; */
.h-40 /* height: 10rem; */
.h-48 /* height: 12rem; */
.h-56 /* height: 14rem; */
.h-64 /* height: 16rem; */
.h-auto /* height: auto; */
.h-px /* height: 1px; */
.h-full /* height: 100%; */
.h-screen /* height: 100vh; */
/* /*
* Min-Height * Min-Height
* -------------------- * --------------------
* * Utilities for setting the minimum height of an element
* * By default, only responsive variants are generated for min-height utilities.
*/ */
.min-h-0 /* min-height: 0; */
.min-h-full /* min-height: 100%; */
.min-h-screen /* min-height: 100vh; */
/* /*
* Max-Height * Max-Height
* -------------------- * --------------------
* * Utilities for setting the maximum height of an element
* * By default, only responsive variants are generated for max-height utilities.
*/ */
.max-h-full /* max-height: 100%; */
.max-h-screen /* max-height: 100vh; */
/* ******************************************************************************************* /* *******************************************************************************************
* TYPOGRAPHY * TYPOGRAPHY
* ******************************************************************************************* */ * ******************************************************************************************* */