A comprehensive Tailwind CSS cheat sheet featuring the most popular utility classes for fast and efficient development. This is a working progress, mainly used for my own projects. If you stumble across this, let me know and help me improve it!
Spacing Class (e.g. p-) Pixels rem 0 0px 0rem 0.5 2px 0.125rem 1 4px 0.25rem 1.5 6px 0.375rem 2 8px 0.5rem 2.5 10px 0.625rem 3 12px 0.75rem 3.5 14px 0.875rem 4 16px 1rem 5 20px 1.25rem 6 24px 1.5rem 7 28px 1.75rem 8 32px 2rem 9 36px 2.25rem 10 40px 2.5rem 11 44px 2.75rem 12 48px 3rem 14 56px 3.5rem 16 64px 4rem 20 80px 5rem 24 96px 6rem 28 112px 7rem 32 128px 8rem 36 144px 9rem 40 160px 10rem 44 176px 11rem 48 192px 12rem 52 208px 13rem 56 224px 14rem 60 240px 15rem 64 256px 16rem 72 288px 18rem 80 320px 20rem 96 384px 24rem
CSS Flexbox Class Description flexApplies display: flex inline-flexApplies display: inline-flex flex-rowItems laid out in a row (default) flex-row-reverseItems laid out in reverse row order flex-colItems laid out in a column flex-col-reverseItems laid out in reverse column order justify-startAlign items to the start of the main axis justify-centerCenter items along the main axis justify-endAlign items to the end of the main axis justify-betweenDistribute items with space between justify-aroundDistribute items with space around justify-evenlyDistribute items with equal space items-startAlign items to the start of the cross axis items-centerAlign items to the center of the cross axis items-endAlign items to the end of the cross axis items-stretchStretch items to fill cross axis flex-wrapAllow items to wrap to multiple lines flex-nowrapPrevent items from wrapping gap-{n}Set gap between flex items (e.g. gap-4)
CSS Grid Class Description gridApplies display: grid inline-gridApplies display: inline-grid grid-cols-{n}Set number of columns (e.g. grid-cols-3) grid-rows-{n}Set number of rows (e.g. grid-rows-2) gap-{n}Set gap between grid items (e.g. gap-4) gap-x-{n}Set horizontal gap only gap-y-{n}Set vertical gap only col-span-{n}Set item to span n columns row-span-{n}Set item to span n rows col-start-{n}Start item at column line n col-end-{n}End item at column line n place-items-centerCenter items in both axes justify-items-startAlign items horizontally to start justify-items-centerCenter items horizontally items-startAlign items vertically to start items-centerCenter items vertically
Font Families & Text Sizes Class Description Default Size font-sansSans-serif (e.g. Inter, system-ui) – font-serifSerif (e.g. Georgia) – font-monoMonospace (e.g. Menlo, Courier) – text-xsExtra small text 0.75rem / 12px text-smSmall text 0.875rem / 14px text-baseBase text (default) 1rem / 16px text-lgLarge text 1.125rem / 18px text-xlExtra large 1.25rem / 20px text-2xl2× large 1.5rem / 24px text-3xl3× large 1.875rem / 30px text-4xl4× large 2.25rem / 36px text-5xl5× large 3rem / 48px text-6xl6× large 3.75rem / 60px text-7xl7× large 4.5rem / 72px text-8xl8× large 6rem / 96px text-9xl9× large 8rem / 128px
Media Query Breakpoints Breakpoint Prefix Min-Width Common Usage Small sm:640px Phones in landscape, small tablets Medium md:768px Tablets, small laptops Large lg:1024px Laptops and desktops Extra Large xl:1280px Large desktops 2XL 2xl:1536px Extra-large screens
Leave a comment