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 |
|
Created By
Metadata
Favourited By
Comments
No comments yet. Add yours below!
Add a Comment
Related Cheat Sheets