TYPOGRAPHY AND SIZING

 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 consectetur adipisicing elit. Architecto nihil
      sint fugiat dolores esse ullam veniam dolor beatae! Ducimus mollitia quo
      ipsa dolorem nobis? Doloribus magni cumque maiores deserunt rem.
    </p>
    <br />
    <p class="font-serif ">
      Lorem, ipsum dolor sit amet consectetur adipisicing elit. Architecto nihil
      sint fugiat dolores esse ullam veniam dolor beatae! Ducimus mollitia quo
      ipsa dolorem nobis? Doloribus magni cumque maiores deserunt rem.
    </p>
    <br /> TEXT-ALIGN
    <p class="font-mono text-right">
      Lorem, ipsum dolor sit amet consectetur adipisicing elit. Architecto nihil
      sint fugiat dolores esse ullam veniam dolor beatae! Ducimus mollitia quo
      ipsa dolorem nobis? Doloribus magni cumque maiores deserunt rem.
    </p>
  </body>
</html>



SIZING

SIZING INCLUDES WIDTH AND HEIGHT, THEY CAN BE INCLUDED IN THE HTML TAGS.

REFER TAILWIND DOC FORE MORE INFO https://tailwindcss.com/docs/height

<!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-green-500 w-1/5 h-24"> testing sizing </div>
  </body>
</html>





Comments

Post a Comment

Popular posts from this blog

Introduction

Image
 USED FOR STYLING TAILWIND CONSISTS OF PRE-BUILD CLASSES IN WHICH STYLING IS DEFINED. USING THESE CLASSES STYLING CAN BE ADDED (BY IMPORTING THEM). TAILWIND ENABLES TO RAPIDLY BUILD MODERN WEBSITES WITHOUT EVER LEAVING YOUR HTML IT IS AN UTILITY FIRST FRAMEWORK TO ADD PADDING   pl-4 (pl- PADDING LEFT) IN TAILWIND 1 = 0.25rem  TO GIVE MARGIN m-4. - IT REDUCES CONFUSION. SOMETIMES, WE MIGHT GET CONFUSED BY THE CLASS NAMES WHILE DEALING WITH LARGE CODE BASES. - BUNDLE SIZE  THE FINAL BUNDLE SIZE OF THE FILE IS NOT SIGNIFICANTLY INCREASED. BUNDLE SIZE REFERS TO THE FINAL CSS FILES THAT CONSISTS DATA ABOUT STYLING FOR EXAMPLE, IF WE'VE USED ONLY MARGIN AND PADDING CLASSES IN OUR FILES. IN THE PRODUCTION BUNDLE OF TAILWIND FILES, ONLY THE CLASSES WE USED ARE STORED. IT DOESNOT STORE ALL THE INBUILT CLASSES OF TAILWIND. ONLY THE CLASSES THAT WE USED ARE SENT TO THE BROWSER. TAILWIND CAN BE USED IN DIFFERENT WAYS, WE USE THE CDN LINK PROVIDED IN THE DOC AND PASTE IT IN ...
Read more

Break points in Tailwind

Image
 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 " >
Read more

Color and Spacing

Image
 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...
Read more