Using Colors in Tailwind

Intro

1. General Color Properties:

   • When we use black or white text color we don't need to specify the shade

   • If we use any other than black or white then we need to specify the shade

   • the shade range is from 0 - 900, 0 being the lightest shade and 900 being the darkest

1. Text Color

• By default the text color is black

<p class="text-white"></p> 
<p class="text-black"></p>

1. Background Color

    <p class="bg-red-200"></p> 
    <p class="bg-green-200"></p>
   

2. Underline Text

   • By default, the underline color will be the same as the text color

       <p class="underline decoration-red-200"></p>
     

3. Border Color

    <p class="border border-red-200"></p>
   

4. In Tailwind CSS, you can use the divide-{color} utility classes to set the color of the dividing lines between child elements.

   For example, to set the dividing line color to red, you would use the class divide-red-500.

   Here's an example:

    htmlCopy code<ul class="divide-y divide-red-500">
      <li>Item 1</li>
      <li>Item 2</li>
      <li>Item 3</li>
    </ul>
   

   This will add a red dividing line between each of the list items.

   You can also use other color names or hexadecimal values in place of red in the class name to set different dividing line colors.

   For example, divide-blue-500 will set the dividing line color to a blue shade, and divide-gray-800 will set the dividing line color to a darker gray.

   You can find a full list of available divide color utility classes in the Tailwind documentation.

5. Outline

   • Create an outline outside the content of the elements

       <button class="outline outline-blue-200">
         This button has a blue outline when focused
       </button>
     

6. Box Shadow

   • For shadow we need to give a shadow size and a color

    <button class="shadow shadow-blue-200">
      This button has a blue outline when focused
    </button>

1. Arbitrary Color

   In Tailwind CSS, you can use either square brackets [] or curly braces {} to specify an arbitrary color using the {color} placeholder.

   Both syntaxes are valid and work the same way. Here's an example using curly braces:

    htmlCopy code<div class="bg-{#1A5276}">
      This element has a dark blue background color
    </div>
   

   And here's the same example using square brackets:

    htmlCopy code<div class="bg-[#1A5276]">
      This element has a dark blue background color
    </div>
   

   Both of these examples will result in the same output.

   However, it's important to note that curly braces are used for variable interpolation in JavaScript, so if you're using Tailwind in a JavaScript file, you'll need to use square brackets to avoid syntax errors.

   In general, it's best to use the syntax that you find most readable and consistent with your code style.