Tailwind

  <! DOCTYPE html > < html lang = "en" >   < head >     < meta charset = "UTF-8" />     < meta name = "viewport" content = "width=device-width, initial-scale=1.0" />     < title > Tailwind Card </ title >     < link rel = "stylesheet" href = "style.css" />   </ head >   < body >     < div class = "border-2  m-4 justify-center w-1/3" >       < div         class = "h-14 bg-gradient-to-t from-sky-500 to-indigo-500 text-white flex justify-center p-4 font-bold"       >         News you can Trust.       </ div >       < div class = "text-center" >         < h2 class = "text-lg font-semibold my-2" > Stay up to date with the Latest! </ h2 >         < p >     ...

 USE @apply TO INLINE ANY EXISTING UTILITY CLASSES INTO YOUR OWN CUSTOM CSS. WHENEVER WE HAVE REPEATED CLASS ELEMENTS , WE CAN GIVE THEM A COMMON CLASS NAME AND USE APPLY DIRECTIVE.     < div class = "bg-purple-500 text-white my-4 border-8 rounded border-green-600" >       one     </ div >     < div class = "bg-purple-500 text-white my-4 border-8 rounded border-blue-600" >       two     </ div >     < div class = "bg-purple-500 text-white my-4 border-8 rounded border-rose-600" >       three     </ div > index.html < div class = "box border-green-600" >       one     </ div >     < div class = "box border-blue-600" >       two     </ div >     < div class = "box border-rose-600" >       three     </ div > STYL...

 USING BREAK POINTS WE CAN MAKE OUR PAGE RESPONSIVE. THE PREFIXES ARE sm - 640px md - 768px lg - 1024px xl - 1280px 2xl - 1536px WE DEFINE USING ":"       < div class = "text-white  my-4 border-8 border-green-600 rounded h-[250px] w-[15rem] sm:bg-orange-600 md:bg-yellow-500 " >

 COLOR:    INCLUDES TEXT COLOR AND BACKGROUND COLOR . <! DOCTYPE html > < html lang = "en" >   < head >     < meta charset = "UTF-8" />     < meta name = "viewport" content = "width=device-width, initial-scale=1.0" />     < title > Document </ title >     < link rel = "stylesheet" href = "style.css" />   </ head >   < body >   < div class = " bg-purple-500 w-1/5 h-24 text-grey-500 " > testing sizing </ div >   </ body > </ html > A NUMBER IS INCLUDED FOR THE COLORS EXCEPT BLACK AND WHITE.  SPACING: MARGIN, PADDING, BORDER. MARGIN: HERE, 1=0.25 rem       4=1 rem m-4  MEANS 1rem MARGIN. ml-4  MARGIN FROM LEFT mr-4  MARGIN FROM RIGHT mt-4 MARGIN FROM TOP. mb-4 MARGIN FROM BOTTOM   < div class = " bg-purple-500 w-1/5 h-24 text-grey-500 mb-4" > testing sizing </ div...

 TYPOGRAPHY INCLUDES FONT-FAMILY, FONT-SIZE, TEXT-ALIGN, FONT-STYLE ... ETC THEY ARE ALREADY PRE-DEFINED IN TAILWIND. <! DOCTYPE html > < html lang = "en" >   < head >     < meta charset = "UTF-8" />     < meta name = "viewport" content = "width=device-width, initial-scale=1.0" />     < title > Document </ title >     < link rel = "stylesheet" href = "style.css" />   </ head >   < body > FONT-SIZE FONT-WEIGHT TEXT-ALIGN     < h1 class = " text-5xl font-black text-center " > this is H1 </ h1 > FONT-STYLE     < h2 class = "text-3xl italic font-bold" > this is H2 </ h2 >     < h3 class = "text-xl font-thin " > this is H3 </ h3 > FONT-FAMILY     < p class = " font-sans " >       Lorem, ipsum dolor sit amet con...

 HERE, WE NEED TO REFRESH THE PAGE AGAIN AND AGAIN TO SEE IF THE STYLING IS ADDED. HENCE, WE INSTALL VITE HERE.( WE'VE INSTALLED DURING REACT) HRE, WE WILL DOWNLOAD THE VERSION V3.4.17 TO INSTALL:  npm install -D tailwindcss@3 npx tailwindcss init -p WE ADD A FLAG -p   TO DOWNLOAD POSTCSS.CONFIG.JS DOWNLOAD VITE : npm i vite IN TAILWIND.CONFIG.JS , content:["*"] WHICH MEANS THAT TAILWIND IS APPLIED FOR ALL(*) THE FILES.HERE, WE CAN DEFINE THE FILES THAT WE WANT TAILWIND TO BE APPLIED FOR. WE CREATE A CSS FILE, AND ADD THESE LINES. @tailwind base ; @tailwind components ; @tailwind utilities ; IN PACKAGE.JSON    "scripts" : {     "start" : "vite"   }, NOW, LINK CSS WITH HTML. HERE, WE ADDED ADDITIONAL AUTOPREFIXER USING COMMAND: npm install autoprefixer postcss --save-dev (CHATGPT)