TailwindCSS Colors

Tailwind comes with a default color palette that we can use to apply to an element background, border, text, and more. We can also extend more colors if we need. Take a look at a few colors provided in tailwind by default.

We can apply any of these colors to an element by adding the color class prefixed with the property we want to change. For instance, if we want black text we could add the class of text-black to any element, or for blue text we could apply text-blue-500, like so:

<p class="text-black">I am black text</p>
<p class="text-blue-500">I am blue text</p>

Notice that for many of the primary colors we are adding 500 to the end of the color. This is because Tailwind has 10 different shades of each color ranging from 50, 100,... 900. Take a look at the full default color palette provided by tailwind here.

Above we have applied those color classes to the element text; however, we can also use those colors for the background of an element like so:

<div class="bg-black text-white">I have a black background</div>
<div class="bg-blue-500 text-white">I have a blue background</div>

Notice that we've also applied white text to the same element in order for the text to be visible.

As you can see we can use all of these utility classes in combination to stylize an element the way we want it displayed on the webpage. Whenever you get good with these utility classes and have them memorized, you'll be painting and arranging elements on a webpage so fast it'll blow your mind.

We can also apply these colors to other areas in our webpage such as border color, ring color, placeholder color, and more. We wil go over those other properties in a future section, but for now, this was just a basic introduction into applying colors to your elements using TailwindCSS.

To learn more about applying text colors to your element be sure to visit the TailwindCSS documentation on text color. Additionally to learn more about applying background colors to your elements visit the Tailwind documentation on background colors.

Are you stoked to learn more about these utility classes? I hope so, because it gets even more fun in the sections to come. See you in the next.