Color and Spacing

 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>


MARGIN FROM LEFT AND RIGHT mx-4 (X-AXIS)

 <div class=" bg-purple-500 w-1/5 h-24 text-grey-500 mx-4"> testing sizing </div>

MARGIN FROM TOP AND BOTTOM my-4 (Y-AXIS)

 <div class=" bg-purple-500 w-1/5 h-24 text-grey-500 my-4"> testing sizing </div>
WE CAN ALSO GIVE NEGATIVE MARGIN(-VE) . WHEN DECLARED -VE THE CONTENT INSIDE THAT TAG GOES BEYOND THE SCREEN OR GIVEN BOUNDARY.

 <div class=" bg-purple-500 w-1/5 h-24 text-grey-500 -ml-4"> testing sizing </div>
NOTE:

WE WERE ASSIGNING NUMBERS THE ENTIRE TIME, IT ONLY WORKS WHEN THE ASSIGNED NUMBERS ARE PRE-DEFINED. IF NOT IT DOESNOT WORK.
IF WE GIVE ml-3.5 IT WORKS, AS IT IS PRE-DEFINED, BUT IF WE GIVE ml-7.5 IT DOES'NT WORK, AS IT IS NOT PRE-DEFINED.
 <div class=" bg-purple-500 w-1/5 h-24 text-grey-500 ml-3.5"> testing sizing </div>


 <div class=" bg-purple-500 w-1/5 h-24 text-grey-500 ml-7.5"> testing sizing </div>





PADDING:

PADDING CAN BE DECLARED SIMILAR TO MARGIN.

p - 4,

pl-3 , pr-5,px-2,py-6

 <div class=" bg-purple-500 w-1/5 h-24 text-grey-500 ml-3 pl-3"> testing sizing </div>

 <div class=" bg-purple-500 w-1/5 h-24 text-grey-500 ml-3 py-5"> testing sizing </div>

NO NEGATIVE PADDING


SPACE BETWEEN:

space-x-4 

space-y-4

BEFORE SPACING

    <div>
      <div class="bg-purple-500   text-white">one</div>
      <div class="bg-purple-500   text-white">two</div>
      <div class="bg-purple-500   text-white">three</div>
    </div>

AFTER SPACING

    <div class=" space-y-4">
      <div class="bg-purple-500   text-white">one</div>
      <div class="bg-purple-500   text-white">two</div>
      <div class="bg-purple-500   text-white">three</div>
    </div>

NOTE:

WHEN DECLARED AS FLEX, AND GIVEN SPACING IN Y AXIS (space-y-4 ) VERTICALLY.

THE SPACING DOESNOT APPLY FOR THE FIRST ELEMENT AS IT IS STARTS FROM TOP(STICKED TO TOP)

    <div class="flex">
      <div class="bg-purple-500   text-white">one</div>
      <div class="bg-purple-500   text-white">two</div>
      <div class="bg-purple-500   text-white">three</div>
    </div>


   <div class="flex space-y-4">
      <div class="bg-purple-500   text-white">one</div>
      <div class="bg-purple-500   text-white">two</div>
      <div class="bg-purple-500   text-white">three</div>
    </div>

    <div class="flex space-x-4">
      <div class="bg-purple-500   text-white">one</div>
      <div class="bg-purple-500   text-white">two</div>
      <div class="bg-purple-500   text-white">three</div>
    </div>



USING JUSTIFY CONTENT :  WE CAN ALLOCATE SPACE BETWEEN ELEMENTS USING JUSTIFY CONTENT.
BUT HERE , THE SPACE IS ALLOCATED EQUALLY.


 <div class="flex justify-between">
      <div class="bg-purple-500   text-white">one</div>
      <div class="bg-purple-500   text-white">two</div>
      <div class="bg-purple-500   text-white">three</div>
    </div>





BORDERS:
ONLY PRE-DEFINED NUMBERS CAN BE USED border-2
                                                                                      border-4 border-8                           


      <div class="bg-purple-500   text-white  my-4 border-2 border-black rounded-2xl">one</div>

THE BORDER IS ROUNDED.

IF WE WANT ONLY THE CORNERS TO BE ROUNDED.

      <div class="bg-purple-500 w-1/5 h-20 ml-4 text-white  my-4 border-2 border-black rounded">one</div>

COLORS CAN ALSO BE ADDED.

      <div class="bg-purple-500 w-1/5 h-20 ml-4 text-white  my-4 border-8 border-green-600 rounded">one</div>

*****NOTE*****:

HERE, WE HAVE BEEN USING ONLY PRE-DEFINED SIZES(NUMBERS) FOR STYLING .

BUT, IF WE WANT TO USE CUSTOM STYLING THEN WE CAN USE SQUARE BRACKETS TO DEFINE THEM(CAN USE ANY UNITS).

      <div class="bg-purple-500 w-1/5 h-20 ml-4 text-white  my-4 border-8 border-green-600 rounded h-[250px] w-[15rem]">one</div>


BUT IT IS NOT RECOMMENDED AS IT WILL INCREASE THE BUNDLE SIZE . USE IT ONLY WHEN REQUIRED.






















 

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