Tailwind CSS Text Color
The text-color utility class in Tailwind CSS allows you to easily set the color of text within elements.
Tailwind Text Color
The text-color utility class in Tailwind CSS allows you to easily set the color of text within elements. With Tailwind's text color classes, you can quickly apply different colors to your text without writing custom CSS.
Applying Text Color
To apply a text color to an element, you can use the text-{color}
utility class, where {color}
represents the desired color. Tailwind CSS provides a wide range of color options that you can use out of the box.
<div class="text-red-500"> This text has a red color.</div>
Preview
This text has the text color of red
Color Variants
Tailwind CSS includes color variants that you can use to modify the brightness or opacity of a color. These variants are specified using a number from 100 to 900. For example, you can use text-red-100
for a lighter shade of red and text-red-900
for a darker shade of red.
<div class="text-green-300"> This text has a lighter shade of green color.</div>
<div class="text-green-700"> This text has a darker shade of green color.</div>
Preview
This text has a lighter shade of green color.
This text has a darker shade of green color.
In the above example, the text-red-100 class is applied to the first <div>
element, setting its text color to a lighter shade of red. The text-red-900 class is applied to the second <div>
element, setting its text color to a darker shade of red.
Tailwind Custom Colors
Tailwind CSS also allows you to define your own custom colors in the configuration file. Once defined, you can use your custom colors with the text-{color}
utility class.
<div class="text-custom-blue"> This text has a custom blue color.</div>
In the above example, a custom color called custom-blue
is defined in the Tailwind CSS configuration file. The text-custom-blue
class is applied to the <div>
element, setting its text color
to the defined custom blue color
.
Responsive Text Color
Tailwind CSS allows you to apply text colors responsively at different breakpoints. To use responsive text color classes, you can append the breakpoint prefix to the text color class. For example, md:text-green-500
applies the green text color starting from the medium breakpoint and above.
<div class="text-blue-500 md:text-green-500"> This text is blue by default, but changes to green starting from the medium breakpoint.</div>
In the above example, the text-blue-500
class is applied by default, setting the text color to blue. However, starting from the medium breakpoint and above (md:text-green-500)
, the text color changes to green.
Tailwind CSS Text Color Class Table
Class | Properties |
---|---|
text-transparent | color: transparent; |
text-current | color: currentColor; |
text-black | --tw-text-opacity: 1;color: rgba(0, 0, 0, var(--tw-text-opacity)); |
text-white | --tw-text-opacity: 1;color: rgba(255, 255, 255, var(--tw-text-opacity)); |
text-gray-50 | --tw-text-opacity: 1;color: rgba(249, 250, 251, var(--tw-text-opacity)); |
text-gray-100 | --tw-text-opacity: 1;color: rgba(243, 244, 246, var(--tw-text-opacity)); |
text-gray-200 | --tw-text-opacity: 1;color: rgba(229, 231, 235, var(--tw-text-opacity)); |
text-gray-300 | --tw-text-opacity: 1;color: rgba(209, 213, 219, var(--tw-text-opacity)); |
text-gray-400 | --tw-text-opacity: 1;color: rgba(156, 163, 175, var(--tw-text-opacity)); |
text-gray-500 | --tw-text-opacity: 1;color: rgba(107, 114, 128, var(--tw-text-opacity)); |
text-gray-600 | --tw-text-opacity: 1;color: rgba(75, 85, 99, var(--tw-text-opacity)); |
text-gray-700 | --tw-text-opacity: 1;color: rgba(55, 65, 81, var(--tw-text-opacity)); |
text-gray-800 | --tw-text-opacity: 1;color: rgba(31, 41, 55, var(--tw-text-opacity)); |
text-gray-900 | --tw-text-opacity: 1;color: rgba(17, 24, 39, var(--tw-text-opacity)); |
text-red-50 | --tw-text-opacity: 1;color: rgba(254, 242, 242, var(--tw-text-opacity)); |
text-red-100 | --tw-text-opacity: 1;color: rgba(254, 226, 226, var(--tw-text-opacity)); |
text-red-200 | --tw-text-opacity: 1;color: rgba(254, 202, 202, var(--tw-text-opacity)); |
text-red-300 | --tw-text-opacity: 1;color: rgba(252, 165, 165, var(--tw-text-opacity)); |
text-red-400 | --tw-text-opacity: 1;color: rgba(248, 113, 113, var(--tw-text-opacity)); |
text-red-500 | --tw-text-opacity: 1;color: rgba(239, 68, 68, var(--tw-text-opacity)); |
text-red-600 | --tw-text-opacity: 1;color: rgba(220, 38, 38, var(--tw-text-opacity)); |
text-red-700 | --tw-text-opacity: 1;color: rgba(185, 28, 28, var(--tw-text-opacity)); |
text-red-800 | --tw-text-opacity: 1;color: rgba(153, 27, 27, var(--tw-text-opacity)); |
text-red-900 | --tw-text-opacity: 1;color: rgba(127, 29, 29, var(--tw-text-opacity)); |
text-yellow-50 | --tw-text-opacity: 1;color: rgba(255, 251, 235, var(--tw-text-opacity)); |
text-yellow-100 | --tw-text-opacity: 1;color: rgba(254, 243, 199, var(--tw-text-opacity)); |
text-yellow-200 | --tw-text-opacity: 1;color: rgba(253, 230, 138, var(--tw-text-opacity)); |
text-yellow-300 | --tw-text-opacity: 1;color: rgba(252, 211, 77, var(--tw-text-opacity)); |
text-yellow-400 | --tw-text-opacity: 1;color: rgba(251, 191, 36, var(--tw-text-opacity)); |
text-yellow-500 | --tw-text-opacity: 1;color: rgba(245, 158, 11, var(--tw-text-opacity)); |
text-yellow-600 | --tw-text-opacity: 1;color: rgba(217, 119, 6, var(--tw-text-opacity)); |
text-yellow-700 | --tw-text-opacity: 1;color: rgba(180, 83, 9, var(--tw-text-opacity)); |
text-yellow-800 | --tw-text-opacity: 1;color: rgba(146, 64, 14, var(--tw-text-opacity)); |
text-yellow-900 | --tw-text-opacity: 1;color: rgba(120, 53, 15, var(--tw-text-opacity)); |
text-green-50 | --tw-text-opacity: 1;color: rgba(236, 253, 245, var(--tw-text-opacity)); |
text-green-100 | --tw-text-opacity: 1;color: rgba(209, 250, 229, var(--tw-text-opacity)); |
text-green-200 | --tw-text-opacity: 1;color: rgba(167, 243, 208, var(--tw-text-opacity)); |
text-green-300 | --tw-text-opacity: 1;color: rgba(110, 231, 183, var(--tw-text-opacity)); |
text-green-400 | --tw-text-opacity: 1;color: rgba(52, 211, 153, var(--tw-text-opacity)); |
text-green-500 | --tw-text-opacity: 1;color: rgba(16, 185, 129, var(--tw-text-opacity)); |
text-green-600 | --tw-text-opacity: 1;color: rgba(5, 150, 105, var(--tw-text-opacity)); |
text-green-700 | --tw-text-opacity: 1;color: rgba(4, 120, 87, var(--tw-text-opacity)); |
text-green-800 | --tw-text-opacity: 1;color: rgba(6, 95, 70, var(--tw-text-opacity)); |
text-green-900 | --tw-text-opacity: 1;color: rgba(6, 78, 59, var(--tw-text-opacity)); |
text-blue-50 | --tw-text-opacity: 1;color: rgba(239, 246, 255, var(--tw-text-opacity)); |
text-blue-100 | --tw-text-opacity: 1;color: rgba(219, 234, 254, var(--tw-text-opacity)); |
text-blue-200 | --tw-text-opacity: 1;color: rgba(191, 219, 254, var(--tw-text-opacity)); |
text-blue-300 | --tw-text-opacity: 1;color: rgba(147, 197, 253, var(--tw-text-opacity)); |
text-blue-400 | --tw-text-opacity: 1;color: rgba(96, 165, 250, var(--tw-text-opacity)); |
text-blue-500 | --tw-text-opacity: 1;color: rgba(59, 130, 246, var(--tw-text-opacity)); |
text-blue-600 | --tw-text-opacity: 1;color: rgba(37, 99, 235, var(--tw-text-opacity)); |
text-blue-700 | --tw-text-opacity: 1;color: rgba(29, 78, 216, var(--tw-text-opacity)); |
text-blue-800 | --tw-text-opacity: 1;color: rgba(30, 64, 175, var(--tw-text-opacity)); |
text-blue-900 | --tw-text-opacity: 1;color: rgba(30, 58, 138, var(--tw-text-opacity)); |
text-indigo-50 | --tw-text-opacity: 1;color: rgba(238, 242, 255, var(--tw-text-opacity)); |
text-indigo-100 | --tw-text-opacity: 1;color: rgba(224, 231, 255, var(--tw-text-opacity)); |
text-indigo-200 | --tw-text-opacity: 1;color: rgba(199, 210, 254, var(--tw-text-opacity)); |
text-indigo-300 | --tw-text-opacity: 1;color: rgba(165, 180, 252, var(--tw-text-opacity)); |
text-indigo-400 | --tw-text-opacity: 1;color: rgba(129, 140, 248, var(--tw-text-opacity)); |
text-indigo-500 | --tw-text-opacity: 1;color: rgba(99, 102, 241, var(--tw-text-opacity)); |
text-indigo-600 | --tw-text-opacity: 1;color: rgba(79, 70, 229, var(--tw-text-opacity)); |
text-indigo-700 | --tw-text-opacity: 1;color: rgba(67, 56, 202, var(--tw-text-opacity)); |
text-indigo-800 | --tw-text-opacity: 1;color: rgba(55, 48, 163, var(--tw-text-opacity)); |
text-indigo-900 | --tw-text-opacity: 1;color: rgba(49, 46, 129, var(--tw-text-opacity)); |
text-purple-50 | --tw-text-opacity: 1;color: rgba(250, 245, 255, var(--tw-text-opacity)); |
text-purple-100 | --tw-text-opacity: 1;color: rgba(243, 232, 255, var(--tw-text-opacity)); |
text-purple-200 | --tw-text-opacity: 1;color: rgba(233, 213, 255, var(--tw-text-opacity)); |
text-purple-300 | --tw-text-opacity: 1;color: rgba(216, 180, 254, var(--tw-text-opacity)); |
text-purple-400 | --tw-text-opacity: 1;color: rgba(192, 132, 252, var(--tw-text-opacity)); |
text-purple-500 | --tw-text-opacity: 1;color: rgba(168, 85, 247, var(--tw-text-opacity)); |
text-purple-600 | --tw-text-opacity: 1;color: rgba(147, 51, 234, var(--tw-text-opacity)); |
text-purple-700 | --tw-text-opacity: 1;color: rgba(126, 34, 206, var(--tw-text-opacity)); |
text-purple-800 | --tw-text-opacity: 1;color: rgba(107, 33, 168, var(--tw-text-opacity)); |
text-purple-900 | --tw-text-opacity: 1;color: rgba(88, 28, 135, var(--tw-text-opacity)); |
text-pink-50 | --tw-text-opacity: 1;color: rgba(253, 242, 248, var(--tw-text-opacity)); |
text-pink-100 | --tw-text-opacity: 1;color: rgba(252, 231, 243, var(--tw-text-opacity)); |
text-pink-200 | --tw-text-opacity: 1;color: rgba(251, 207, 232, var(--tw-text-opacity)); |
text-pink-300 | --tw-text-opacity: 1;color: rgba(249, 168, 212, var(--tw-text-opacity)); |
text-pink-400 | --tw-text-opacity: 1;color: rgba(244, 114, 182, var(--tw-text-opacity)); |
text-pink-500 | --tw-text-opacity: 1;color: rgba(236, 72, 153, var(--tw-text-opacity)); |
text-pink-600 | --tw-text-opacity: 1;color: rgba(219, 39, 119, var(--tw-text-opacity)); |
text-pink-700 | --tw-text-opacity: 1;color: rgba(190, 24, 93, var(--tw-text-opacity)); |
text-pink-800 | --tw-text-opacity: 1;color: rgba(157, 23, 77, var(--tw-text-opacity)); |
text-pink-900 | --tw-text-opacity: 1;color: rgba(131, 24, 67, var(--tw-text-opacity)); |
Windframe Tailwind blocks
Windframe is a drag and drop builder for rapidly building tailwind css websites and UIs