npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p
then in tailwind.config.js file write this code.
content: ["./src/**/*.{js,jsx,ts,tsx}"],
then index.css file paste this code on top
@tailwind base;
@tailwind components;
@tailwind utilities;
npm start for run react app
1.Layout
2.Flexbox & Grid
3.Spacing
4.Sizing
5.Typography
6.Backgrounds
7.Borders
8.Effects
9.Filters
10.Tables
11.Transitions & Animation
12.Transforms
13.Interactivity
14.SVG
15.Accessibility
container mx-auto === container
columns-3 === for 3 column
break-after-column, break-before-column, break-inside-avoid-column === start new column
box-border, box-content === box size
block, inline-block === display property
inline-flex === inline image+ content
float-left, float-right, clear-none === preview like a newspaper
object-cover, object-contain, object-fill === Object fit
overflow-visible, overflow-hidden === overflow
static + absolute bottom-0 left-0 === position absolute any object.
inset-x-0 === left 0 right 0
inset-y-0 === top 0 bottom 0
visible,invisible === visibility
z-10 === Z for z-index
flex flex-row === flex row wise
flex flex-col-reverse === col reverse flex
flex-wrap, flex-norap === flex wrap declire
flex-none, flex-auto, flex-1 === no flex, auto mean width messure, 1 mean all same
basis-2/5, basis-1/5 === 2/3 mean 40%, 1/5 mean 20%
grow, shrink === grow mean bigger, shrink mean small
order-last, order-first, order-1 === order of a div
grid grid-cols-4 gap-4 === grid+column 4
col-span-2 == double size col
col-start-2, col-end-5 == start from 2 number, end before 5
grid grid-rows-4 grid-flow-col === 4 item in a row
(grid for more explore, plese read docs)
gap-x-8 gap-y-4 === grid item gap
flex justify-center === all items center
justify-between, justify-around === between and around
grid justify-items-center === all items center
justify-self-end === in items... it will last
justify-self-stretch === full width take
content-center, content-between ==== inside div all items will center and between
content-around, content-evenly === inside div all items will around and evenly
items-center, items-end, items-baseline === indide div all items center, end
self-center, self-end, self-stretch === single item apply
(Place Conent for more visit doc)
grid grid-cols-3 gap-4 place-items-center === inside all div center
place-self-center === single item center
px-1 py-1 === padding x 4px right-left, and bottom-top
px-5 py-5 === padding x 20px right-left, and bottom-top
pr, pl, pb, pt === padding right, left, bottom, top
my-2.5 mx-2.5 === margin y (42.5) 10px, x 10px
m-16 === (164) 64px all side
space-x-8, space-y-8 === (8*4) 32px margin left and margin top
w-5 === (54) 20px width
w-2/3, w-3/4, w-3/12, w-11/12 === 66% width, 75% width, 25% width, 91% width
w-full === 100% width
min-w-[50%], min-w-full === min width 50%, min width 100%
min-w-0, min-w-min === min width 0, min-width min content
max-w-sm, max-w-md, max-w-lg, max-w-xl, max-w-2xl === (24,28,32)rem16 = px max width
max-w-full, max-w-max === 100%, max-content
max-w-screen-sm, max-w-screen-md, max-w-screen-lg, max-w-screen-xl, max-w-screen-2xl === 640px, 768px, 1024px, 1280px, 1536px
h-10 === (104) 40px height
h-2/3, h-3/4, h-5/6 === 66%, 75%, 83%,
h-full, h-screen, h-[32rem] === 100%, 100vh, 32rem height
min-h-0, min-h-full, min-h-screen === 0, 100%, 100vh
min-h-max, min-h-fit, min-h-[50%] === max-content, fit-content, 50%
max-h-8, max-h-full === (84) 32px, 100%
FontSize: every rem meaning 16px; 0.25rem mean 4px;
text-sm, text-base, text-xl, text-2xl === (14px, 16, 20, 24px)
italic font-mono === (font-family: ui-monospace)(font-style: italic;)
font-normal, font-semibold, font-bold, font-extrabold, font-black === (font-weight: 400, 600, 700, 800, 900)
diagonal-fractions === (for half writing)
tracking-[.25em] === (for spaceing in letter)
leading-relaxed === (line-height: 1.625rem)
leading-loose === (line-height: 2)
list-disc === (bulletList)
list-decimal ==== (number list)
list-outside === (for list start left)
text-center, text-right, text-justify === (for text align)
text-current, text-slate-600, text-gray-900, text-zinc-800
text-neutral-700, text-stone-500, text-amber-600, text-cyan-400
text-teal-200, text-fuchsia-200
text-blue-600/100 === (color with opacity)
text-[#50d71e] ===(rgb value)
underline, overline, line-through, no-underline ===(no underline for a link)
underline decoration-wavy === (for bottom ~ design)
uppercase, lowercase, capitalize, normal-case === (text-transform: "")
truncate === (overflow: hidden;)
align-bottom, align-top, align-middle === (vertical-align: middle;)
bg-fixed, bg-scroll === Background image
bg-clip-border, bg-clip-content === background Clip Box
bg-gray-200 bg-zinc-300 bg-neutral-400 bg-stone-500
bg-amber-600 bg-lime-700 bg-emerald-800 bg-teal-900
bg-cyan-100 bg-sky-200 bg-indigo-300 bg-violet-400 bg-purple-500
bg-fuchsia-600 bg-pink-700 bg-rose-800
bg-sky-500/100 === bg color with opacity
bg-[#50d71e] === direct use
bg-left-top, bg-right-bottom, bg-center === bg position
bg-no-repeat, bg-repeat-y, bg-repeat-round, bg-repeat-space === bg repect
bg-auto, bg-cover, bg-contain === background size
bg-gradient-to-r, bg-gradient-to-br, bg-gradient-to-tl === right, bottom-right, top-left
bg-gradient-to-r from-pink-500 via-lime-500 via-to-sky-800 === gredient bg
rounded, rounded-md, rounded-lg, rounded-full === border round
border-2, border-4 === border
border-x-2, border-y-2, border-r-4, border-l-4 === border problem
border-violet-100, border-y-pink-900, border-4 border-indigo-500/100 ==== border
border-solid, border-dashed, border-dotted === border style
outline-1, outline-0, outline-4 === border outline
outline-2 outline-blue-500/50 === outline color border
outline-dotted, outline-double === outline style
outline-offset-2, outline-offset-4 === outline offset border
ring-offset-2 ring-2 === box-shadow
ring-2 ring-blue-500/50 === ring color
ring-offset-2 ring-offset-slate-100 === ring offset color
shadow-md, shadow-lg, shadow-xl, shadow-2xl === shadow
shadow-indigo-500/40 === shadow color
opacity-50, opacity-75, opacity-100 === opacity
mix-blend-multiply === two circle together
blur-sm, blur-lg === blur
brightness-50, brightness-100, brightness-200 === brightness
contrast-50, contrast-100, contrast-200 === contrast
drop-shadow-lg, drop-shadow-xl, drop-shadow-2xl === drop-shadow
grayscale-0, grayscale === grayscale
hue-rotate-90, hue-rotate-180, -hue-rotate-60 === hue-rotate
invert-0, invert === invert
saturate-100, saturate-150, saturate-200 === saturate
sepia-0, sepia === sepia
backdrop-blur-md, backdrop-blur-xl === backdrop-blur
backdrop-grayscale, backdrop-contrast-200, backdrop-brightness-200
backdrop-hue-rotate-180, backdrop-invert, backdrop-opacity-95
backdrop-saturate-200, backdrop-sepia
border-collapse, border-separate === border
border border-slate-300 === table style
border-spacing-2 === table spacing
table-auto, table-fixed === table fixed
transition, transition-shadow, transition-transform === transition
duration-150, duration-300, duration-700 === duration
ease-in, ease-in-out, ease-out === transition timing
delay-150, delay-300, delay-700 === delay
animate-spin, animate-ping, animate-pulse, animate-bounce === animation
scale-125, scale-50, -scale-50, transform-gpu === transform
rotate-45, rotate-90, rotate-180 === rotate
translate-y-6, -translate-y-6 === translate
skew-y-6, skew-y-12 === skew
origin-center, origin-top-left === origin
cursor-auto, cursor-pointer, cursor-progress, cursor-zoom-in === cursor
caret-pink-500, resize-y === caret color + resize
scroll-smooth, scroll-ml-6, scroll-pl-6 === scroll
snap-center, snap-start, snap-always, snap-y === snap
overflow-auto touch-auto , will-change-scroll === scrool
select-text, select-auto === text highlight
fill-blue-500, stroke-cyan-500, stroke-1, stroke-2 === SVG
sr-only, not-sr-only === Accessibility
Responsive Image Classes: "rounded-lg shadow-xl sm:mt-8 sm:h-64 lg:mt-0 sm:w-full sm:object-cover"