Tailwind CSS Text Color

Read

Discuss

This class accepts lots of value in tailwind CSS in which all the properties are covered in class form. By using this class we can color any text. In CSS, we do that by using the CSS Color property.

Text Color classes:

text-transparent: The text color will be transparent.
text-current: The text color will depend on the parent element color.
text-black: The text color will be black.
text-white: The text color will be white.
text-gray-50: The text color will be gray.
text-red-50: The text color will be red.
text-blue-50: The text color will be blue.
text-indigo-50: The text color will be indigo.
text-purple-50: The text color will be purple.
text-green-50: The text color will be green.
text-yellow-50: The text color will be yellow.
text-pink-50: The text color will be pink.

Note: The color’s values can be changeable according to your need from 50-900, the span should be 100, after the 100.

Syntax:

<element class="text-{color}">...</element>

Example: All the possible classes are covered in this example, you can change the color value to make it more contrast, full, or make it more faded.

HTML

<!DOCTYPE html>  
<head>  
    <link href= 
"https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" 
          rel="stylesheet">  
</head>  
  
<body class="text-center mx-4 space-y-2">  
    <h2 class="text-green-600 text-5xl font-bold"> 
        GeeksforGeeks 
    </h2>  
    <b>Tailwind CSS Text Color Class</b>  
    <div class="mx-14 bg-green-200 grid grid-rows-4 
                grid-flow-col text-justify p-4"> 
          
       <p class="text-transparent p-2"> 
         A Computer Science Portal for Geeks 
       </p> 
  
       <p class="text-current p-2"> 
           A Computer Science Portal for Geeks 
       </p> 
  
       <p class="text-black p-2"> 
           A Computer Science Portal for Geeks 
       </p> 
  
       <p class="text-white p-2"> 
           A Computer Science Portal for Geeks 
       </p> 
  
       <p class="text-gray-700 p-2"> 
           A Computer Science Portal for Geeks 
       </p> 
  
       <p class="text-red-700 p-2"> 
           A Computer Science Portal for Geeks 
       </p> 
  
       <p class="text-indigo-700 p-2"> 
           A Computer Science Portal for Geeks 
       </p> 
  
       <p class="text-blue-700 p-2"> 
           A Computer Science Portal for Geeks 
       </p> 
  
       <p class="text-green-700 p-2"> 
          A Computer Science Portal for Geeks 
       </p> 
  
       <p class="text-yellow-700 p-2"> 
          A Computer Science Portal for Geeks 
       </p> 
  
       <p class="text-pink-700 p-2"> 
          A Computer Science Portal for Geeks 
       </p> 
  
       <p class="text-purple-700 p-2"> 
          A Computer Science Portal for Geeks 
       </p> 
  
  
    </div> 
</body>  
  
</html>  

Output:

CSS text color

Whether you're preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape, GeeksforGeeks Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we've already empowered, and we're here to do the same for you. Don't miss out - check it out now!

Last Updated : 23 Mar, 2022