Scribd
Upload
61 views2 pages

Tailwind CSS Cheat Sheet

The document provides an overview of Tailwind CSS utility classes for color, containers and spacing, typography, width and height, layout and position, background and shadow, borders and radius. It includes classes for text color, background color, underline color, border color, divide color, outline color and more. It also includes classes for container widths, padding, margins, font sizes, font weights, text alignment and transforms. Additional classes cover widths, heights, viewport sizes, layout properties, backgrounds, shadows, borders, border radius and outlines.

Uploaded by

jaimin patel
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
61 views2 pages

Tailwind CSS Cheat Sheet

The document provides an overview of Tailwind CSS utility classes for color, containers and spacing, typography, width and height, layout and position, background and shadow, borders and radius. It includes classes for text color, background color, underline color, border color, divide color, outline color and more. It also includes classes for container widths, padding, margins, font sizes, font weights, text alignment and transforms. Additional classes cover widths, heights, viewport sizes, layout properties, backgrounds, shadows, borders, border radius and outlines.

Uploaded by

jaimin patel
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 2

<<<<Tailwind-color-concept idea>>>

text-color-800
bg-color-700
underline-color-200
border-color-700
divide-color-100
outline-color-700
box-shadow-color-600
accent-color-300
bg-[color]

<<<Tailwind-Container&sapcing>>>
.container xs:,sm:,md:,lg:,xl:,
.p-10
.px-10 left-right
.py-10 top-bottom
.pl-10 left , .pr-10 right, pt-10 top,pb-10 bottom,
.ml-10 left , .mr-10 right, mt-10 top,mb-10 bottom,
p-[any value], m-[any value],
.space-x-10 middle space add left right
.space-y-10 middle space add top bottom

<<<Typography>>>
font-customfontname
font-roboto
text-xs,text-sm,text-md,text-lg,text-xl,text-2xl,text-9xl,
font-light,font-normal,font-medium,font-semibold,font-bold,
tracking-tight,tracking-normal,tracking-wide,traking-wider, spacing classes
text-left,text-center,text-right, aliement classes
underline decoration-4 decoration-color-600,decoration-double,-dotted,-dashed,-wavy
underline design classes
underline-offset-2, underline and text middle space increase
normal-case,uppercase,lowercase,capitalize, text transform classes

<<<Width & Height>>>


w-4,w-12,w-96 rem width classes
w-1/4,w-1/3,w-1/2 percentage classes
w-screen viewport width class
w-full container class css
w-[300px] arbitrary width
max-w-md,lg,sm,-xs,max-w-[any value] max width
h-24,h-32,h-96,h-screen

<<<Layout & Position>>>


flex,inline-flex,grid,relative,absolute,fixed,sticky
left-0,top-0,right-0,bottom-0,
inset-x-0,inset-y-0
block,inline-block,hidden,
z-10,z-20,z-30,z-40
float-left,float-right,

<<<Background & Shadow>>>


bg-repeate,bg-no-repate,bg-cover,bg-contain,bg-center,bg-fixed,bg-scroll,
bg-gradient-to-r from-color-400 to-color-100,bg-gradient-to-l
shadow,shadow-md,-lg,-xl,shadow-none,shadow-inner,shadow-color-400
<<<Border & Radius>>>
border,border-0,border-2,border-color-400,border-left-2,-right-2,-top-2,-bottom-2
border classes
rounded-none,rounded,rounded-md,-lg,-xl,-full border-radius classes
outline,outline-1,-2,-4,-8, outline classe

"Video Link:
https://anblicks.zoom.us/rec/share/NYSBKggrMIyjxBDFoeJZX1OBBMLegwAT4UpRGAKpGMSD2N-
9l53hPDCMAiSSbZcA.siXgmh4f9uxwszmN
Passcode: $&M03&+k "

npm run start:dev:windows --client=hertz

You might also like