Tailwind CSS 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
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
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.
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(245, 243, 255, var(--tw-text-opacity)); |
text-purple-100 | --tw-text-opacity: 1;color: rgba(237, 233, 254, var(--tw-text-opacity)); |
text-purple-200 | --tw-text-opacity: 1;color: rgba(221, 214, 254, var(--tw-text-opacity)); |
text-purple-300 | --tw-text-opacity: 1;color: rgba(196, 181, 253, var(--tw-text-opacity)); |
text-purple-400 | --tw-text-opacity: 1;color: rgba(167, 139, 250, var(--tw-text-opacity)); |
text-purple-500 | --tw-text-opacity: 1;color: rgba(139, 92, 246, var(--tw-text-opacity)); |
text-purple-600 | --tw-text-opacity: 1;color: rgba(124, 58, 237, var(--tw-text-opacity)); |
text-purple-700 | --tw-text-opacity: 1;color: rgba(109, 40, 217, var(--tw-text-opacity)); |
text-purple-800 | --tw-text-opacity: 1;color: rgba(91, 33, 182, var(--tw-text-opacity)); |
text-purple-900 | --tw-text-opacity: 1;color: rgba(76, 29, 149, 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
Build modern projects using Bootstrap 5 and Contrast
Trying to create components and pages for a web app or website from
scratch while maintaining a modern User interface can be very tedious.
This is why we created Contrast, to help drastically reduce the amount of time we spend doing that.
so we can focus on building some other aspects of the project.
Contrast Bootstrap PRO consists of a Premium UI Kit Library featuring over 10000+ component variants.
Which even comes bundled together with its own admin template comprising of 5 admin dashboards and 23+ additional admin and multipurpose pages for
building almost any type of website or web app.
See a demo and learn more about Contrast Bootstrap Pro by clicking here.