Cheatography
https://cheatography.com
Monster Framework for Oxygen Cheatsheet!
Displaygrid | inline-grid | display-none |
Grid template columnsgrid | grid-cols-1 | grid-cols-2 | grid-cols-3 | grid-cols-4 | grid-cols-5 | grid-cols-6 | grid-cols-none |
Grid template rowsgrid-rows-1 | grid-rows-2 | grid-rows-3 | grid-rows-none |
Grid column start endcol-end-1 | col-end-2 | col-end-3 | col-end-4 | col-end-5 | col-end-6 | col-end-7 | col-end-auto | col-start-1 | col-start-2 | col-start-3 | col-start-4 | col-start-5 | col-start-6 | col-start-7 | col-start-auto | col-auto | col-span-1 | col-span-2 | col-span-3 | col-span-4 | col-span-5 | col-span-6 |
Grid row start endrow-auto | row-span-1 | row-span-2 | row-span-3 | row-start-1 | row-start-2 | row-start-3 | row-start-4 | row-start-auto | row-end-auto | row-end-1 | row-end-2 | row-end-3 | row-end-4 |
Grid auto flowgrid-flow-row | grid-flow-col | grid-flow-row-dense | grid-flow-col-dense |
Gapgap-px | gap-2 | gap-4 | gap-6 | gap-8 | gap-12 | gap-16 | row-gap-0 | row-gap-2 | row-gap-4 | row-gap-6 | row-gap-8 | row-gap-12 |
Avatarsavatar | avatar-sm | avatar-lg | avatar-xl |
Buttonsbtn-primary | btn-primary-trans | btn-secondary | btn-light-trans | btn-l | btn-m | btn-s |
Background colorsbg | bg-primary | bg-secondary | bg-tertiary | bg-alt | bg-white | bg-black | bg-placeholder | bg-placeholder-alt |
Colorscolor-primary | color-secondary | color-tertiary | color-dark | color-paragraph | color-light | color-paragraph-light |
Cardscard-normal | card-loose | card-tight | card-snug | card-relaxed | card-none |
Border radiusrounded | rounded-sm | rounded-md | rounded-lg | rounded-full | rounded-r-lg | rounded-b-lg | rounded-l-lg | rounded-t-lg | rounded-r | rounded-l | rounded-b | rounded-t |
Border widthborder-none | border-px | border-2 | border-t | border-r | border-b | border-l |
Border colorsborder-color | border-color-alt | border-color-tertiary | border-color-secondary | border-color-primary |
Align Itemshorizontal | vertical | horizontal-wrap | centered | items-center | content-center | content-between | content-around |
Widthw-auto | w-1by2 | w-1by3 | w-2by3 | w-1by4 | w-2by4 | w-3by4 | w-1by6 | w-2by6 | w-3by6 | w-4by6 | w-5by6 | w-1by5 | w-10p | w-full | w-screen |
Paddingp-0 | p-1 | p-2 | p-3 | p-4 | p-5 | p-6 | p-8 | p-12 | p-16 | px-1 | px-2 | px-3 | px-4 | px-5 | px-6 | px-8 | px-12 | px-16 | py-1 | py-2 | py-3 | py-4 | py-5 | py-6 | py-8 | py-12 | py-16 |
Marginmx-auto | my-auto | mt-auto | mr-auto | mb-auto | ml-auto | mr-0 | mr-2 | mr-3 | mr-4 | mr-5 | mr-6 | mr-8 | mr-12 | mr-16 | mr-24 | mb-2 | mb-3 | mb-4 | mb-5 | mb-6 | mb-8 | mb-12 | mb-16 | mb-24 |
Box shadowshadow-xs | shadow-sm | shadow | shadow-md | shadow-lg | shadow-xl | shadow-2xl |
Opacityopacity | opacity-25 | opacity-50 | opacity-75 | opacity-100 | hover-opacity-0 | hover-opacity-25 | hover-opacity-50 | hover-opacity-75 | hover-opacity-100 |
Text decorationunderline | hover-underline |
Text transformsuppercase | lowercase | capitalize |
Text aligntext-left | text-center | text-right |
Font sizestext-sm | text-base | text-lg | text-xl | text-2xl |
Font weightfont-normal | font-medium | font-semibold | font-bold |
Iconsicon-sm-primary | icon-md-primary | icon-lg-primary | icon-xl-primary | icon-sm-dark | icon-md-dark | icon-lg-dark | icon-xl-dark | icon-sm-light | icon-lg-light | icon-xl-light | icon-2xl-light | icon-solid-sm-light | icon-solid-md-light | icon-solid-lg-primary |
| | Responsive classesAll the responsive classes |
Grid Column Start End - Responsive classesxl-col-auto | lg-col-auto | md-col-auto | sm-col-auto | xl-col-start-auto | lg-col-start-auto | md-col-start-auto | sm-col-start-auto | xl-col-start-1 | lg-col-start-1 | md-col-start-1 | sm-col-start-1 | xl-col-start-2 | lg-col-start-2 | md-col-start-2 | sm-col-start-2 | xl-col-start-3 | lg-col-start-3 | md-col-start-3 | sm-col-start-3 | xl-col-start-4 | lg-col-start-4 | md-col-start-4 | sm-col-start-4 | xl-col-start-5 | lg-col-start-5 | md-col-start-5 | xl-col-start-6 | xl-col-end-auto | lg-col-end-auto | md-col-end-auto | sm-col-end-auto | xl-col-end-1 | lg-col-end-1 | md-col-end-1 | sm-col-end-1 | xl-col-end-2 | lg-col-end-2 | md-col-end-2 | sm-col-end-2 | xl-col-end-3 | lg-col-end-3 | md-col-end-3 | sm-col-end-3 | xl-col-end-4 | lg-col-end-4 | md-col-end-4 | sm-col-end-4 | xl-col-end-5 | lg-col-end-5 | md-col-end-5 | xl-col-end-6 | xl-col-span-1 | lg-col-span-1 | md-col-span-1 | sm-col-span-1 | xl-col-span-2 | lg-col-span-2 | md-col-span-2 | sm-col-span-2 | xl-col-span-3 | lg-col-span-3 | md-col-span-3 | sm-col-span-3 | xl-col-span-4 | lg-col-span-4 | md-col-span-4 | xl-col-span-5 |
Grid Template Columns - Responsive classesxl-grid-cols-1 | lg-grid-cols-1 | md-grid-cols-1 | sm-grid-cols-1 | xl-grid-cols-2 | lg-grid-cols-2 | md-grid-cols-2 | sm-grid-cols-2 | xl-grid-cols-3 | lg-grid-cols-3 | md-grid-cols-3 | sm-grid-cols-3 | xl-grid-cols-4 | lg-grid-cols-4 | md-grid-cols-4 | xl-grid-cols-5 | xl-grid-cols-none | lg-grid-cols-none | md-grid-cols-none | sm-grid-cols-none |
You have to use grid class to work with these classes. Height - Responsive classesxl-h-full | lg-h-full | md-h-full | sm-h-full | xl-h-screen | lg-h-screen | md-h-screen | sm-h-screen |
Display - Responsive classes| | lg-display-none | md-display-none | sm-display-none | | | lg-hidden | md-hidden | sm-hidden |
Font sizes - Responsive classesxl-text-2xl | lg-text-2xl | xl-text-xl | lg-text-xl | md-text-xl | sm-text-xl | xl-text-lg | lg-text-lg | md-text-lg | sm-text-lg | | | lg-text-base | md-text-base | sm-text-base | | | lg-text-sm | md-text-sm | sm-text-sm |
Margin - Responsive classesxl-mx-auto | lg-mx-auto | md-mx-auto | sm-mx-auto | | | | md-ml-auto | sm-ml-auto | | | | md-mr-auto | | | lg-my-auto | xl-mr-12 | xl-mr-8 | lg-mr-8 | md-mr-8 | sm-mr-8 | xl-mr-6 | lg-mr-6 | md-mr-6 | sm-mr-6 | xl-mr-5 | lg-mr-5 | md-mr-5 | sm-mr-5 | | | lg-mr-4 | md-mr-4 | sm-mr-4 | | | lg-mr-3 | md-mr-3 | sm-mr-3 | | | lg-mr-2 | md-mr-2 | sm-mr-2 | | | | md-mr-1 | sm-mr-1 | | | lg-mr-0 | md-mr-0 | sm-mr-0 | xl-mb-12 | lg-mb-12 | xl-mb-8 | lg-mb-8 | md-mb-8 | sm-mb-8 | xl-mb-6 | lg-mb-6 | md-mb-6 | sm-mb-6 | xl-mb-5 | lg-mb-5 | md-mb-5 | sm-mb-5 | | | lg-mb-4 | md-mb-4 | sm-mb-4 | | | lg-mb-3 | md-mb-3 | sm-mb-3 | | | lg-mb-2 | md-mb-2 | | | | md-mb-1 | | | | md-mb-0 | | | | | sm-mt-3 | | | | | sm-mt-2 | | | | | sm-mt-1 | | | | | sm-mt-0 |
Width - Responsive classesxl-w-full | lg-w-full | md-w-full | sm-w-full | xl-w-1by2 | lg-w-1by2 | md-w-1by2 | sm-w-1by2 | xl-w-1by3 | lg-w-1by3 | md-w-1by3 | xl-w-2by3 | lg-w-2by3 | md-w-2by3 | xl-w-1by4 | lg-w-1by4 | xl-w-2by4 | lg-w-2by4 | xl-w-3by4 | lg-w-3by4 |
Padding - Responsive classes| | | md-p-1 | sm-p-1 | | | | md-p-2 | sm-p-2 | | | lg-p-3 | md-p-3 | sm-p-3 | xl-p-4 | lg-p-4 | md-p-4 | sm-p-4 | xl-p-5 | lg-p-5 | md-p-5 | sm-p-5 | xl-p-6 | lg-p-6 | md-p-6 | sm-p-6 | xl-p-8 | lg-p-8 | md-p-8 | sm-p-8 | xl-p-12 | | | | md-px-1 | sm-px-1 | | | | md-px-2 | sm-px-2 | | | lg-px-3 | md-px-3 | sm-px-3 | xl-px-4 | lg-px-4 | md-px-4 | sm-px-4 | xl-px-5 | lg-px-5 | md-px-5 | sm-px-5 | xl-px-6 | lg-px-6 | md-px-6 | sm-px-6 | xl-px-8 | lg-px-8 | md-px-8 | sm-px-8 | xl-px-12 | | md-px-12 | | | | md-py-1 | sm-py-1 | | | | md-py-2 | sm-py-2 | | | lg-py-83 | md-py-3 | sm-py-3 | xl-py-4 | lg-py-4 | md-py-4 | sm-py-4 | xl-py-5 | lg-py-5 | md-py-5 | sm-py-5 | xl-py-6 | lg-py-6 | md-py-6 | sm-py-6 | xl-py-8 | lg-py-8 | md-py-8 | sm-py-8 | xl-py-12 | | md-py-12 |
Align Items - Responsive classesxl-horizontal | lg-horizontal | md-horizontal | sm-horizontal | xl-vertical | lg-vertical | md-vertical | sm-vertical | xl-horizontal-wrap | lg-horizontal-wrap | md-horizontal-wrap | sm-horizontal-wrap | | | | md-centered | sm-centered |
|
Help Us Go Positive!
We offset our carbon usage with Ecologi. Click the link below to help us!
Created By
Metadata
Favourited By
Comments
No comments yet. Add yours below!
Add a Comment
Related Cheat Sheets