Tailwind CSS Text Color - GeeksforGeeks

23 Mar, 2022
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
Tailwind CSS
Tailwind-Typography
CSS
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to insert spaces/tabs in text using HTML/CSS?
How to update Node.js and NPM to next version ?
How to create footer to stay at the bottom of a Web page?
How to apply style to parent if it has child with CSS?
Remove elements from a JavaScript Array
Installation of Node.js on Linux
Convert a string to an integer in JavaScript
How to fetch data from an API in ReactJS ?
Top 10 Projects For Beginners To Practice HTML and CSS Skills