{"componentChunkName":"component---src-templates-tailwindclass-js","path":"/tailwindcss/classes/tailwind-text-color/","result":{"data":{"site":{"siteMetadata":{"title":"Resources to help developers | Contrast | Devwares","docsLocation":""}},"mdx":{"fields":{"id":"c3daacf9-b85c-5284-80ff-af8bab308d40","title":"Tailwind CSS Text Color","slug":"/classes/tailwind-text-color/"},"body":"var _excluded = [\"components\"];\nfunction _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }\nfunction _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], t.indexOf(o) >= 0 || {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }\nfunction _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.indexOf(n) >= 0) continue; t[n] = r[n]; } return t; }\n/* @jsxRuntime classic */\n/* @jsx mdx */\n\nvar _frontmatter = {\n  \"lastUpdated\": \"20 May 2024\",\n  \"title\": \"Tailwind CSS Text Color\",\n  \"metaTitle\": \"Tailwind CSS Text Color\",\n  \"metaDescription\": \"The text-color utility class in Tailwind CSS allows you to easily set the color of text within elements.\",\n  \"canonicalUrl\": \"https://windframe.dev/tailwind/classes/tailwind-text-color\"\n};\nvar layoutProps = {\n  _frontmatter: _frontmatter\n};\nvar MDXLayout = \"wrapper\";\nreturn function MDXContent(_ref) {\n  var components = _ref.components,\n    props = _objectWithoutProperties(_ref, _excluded);\n  return mdx(MDXLayout, _extends({}, layoutProps, props, {\n    components: components,\n    mdxType: \"MDXLayout\"\n  }), mdx(\"h1\", null, \"Tailwind Text Color\"), mdx(\"p\", null, \"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.\"), mdx(\"h2\", null, \"Applying Text Color\"), mdx(\"p\", null, \"To apply a text color to an element, you can use the \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"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.\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-html\"\n  }, \"<div class=\\\"text-red-500\\\">\\n  This text has a red color.\\n</div>\\n\")), mdx(\"h2\", null, \"Preview\"), mdx(\"div\", {\n    className: \"rounded-t-xl overflow-hidden bg-red-100 p-10\"\n  }, mdx(\"div\", {\n    className: \"text-center text-red-500 font-extrabold  text-3xl\"\n  }, \"This text has the text color of red\")), \"---\", mdx(\"h2\", null, \"Color Variants\"), mdx(\"p\", null, \"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 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"text-red-100\"), \" for a lighter shade of red and \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"text-red-900\"), \" for a darker shade of red.\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-html\"\n  }, \"<div class=\\\"text-green-300\\\">\\n  This text has a lighter shade of green color.\\n</div>\\n\\n<div class=\\\"text-green-700\\\">\\n  This text has a darker shade of green color.\\n</div>\\n\")), mdx(\"h2\", null, \"Preview\"), mdx(\"div\", {\n    className: \"rounded-t-xl overflow-hidden bg-green-100 p-10\"\n  }, mdx(\"div\", {\n    className: \"text-center text-green-300 font-extrabold  text-3xl\"\n  }, \"This text has a lighter shade of green color.\"), mdx(\"div\", {\n    className: \"text-center text-green-700 font-extrabold  text-3xl\"\n  }, \"This text has a darker shade of green color.\")), \"---\", mdx(\"p\", null, \"In the above example, the text-red-100 class is applied to the first \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"<div>\"), \" element, setting its text color to a lighter shade of red. The text-red-900 class is applied to the second \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"<div>\"), \" element, setting its text color to a darker shade of red.\"), mdx(\"h2\", null, \"Tailwind Custom Colors\"), mdx(\"p\", null, \"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.\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-html\"\n  }, \"<div class=\\\"text-custom-blue\\\">\\n  This text has a custom blue color.\\n</div>\\n\")), mdx(\"p\", null, \"In the above example, a custom color called \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"custom-blue\"), \" is defined in the Tailwind CSS configuration file. The \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"text-custom-blue\"), \" class is applied to the \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"<div>\"), \" element, setting its \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"text color\"), \" to the defined \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"custom blue color\"), \".\"), mdx(\"h2\", null, \"Responsive Text Color\"), mdx(\"p\", null, \"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, \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"md:text-green-500\"), \" applies the green text color starting from the medium breakpoint and above.\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-html\"\n  }, \"<div class=\\\"text-blue-500 md:text-green-500\\\">\\n  This text is blue by default, but changes to green starting from the medium breakpoint.\\n</div>\\n\")), mdx(\"p\", null, \"In the above example, the \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"text-blue-500\"), \" class is applied by default, setting the text color to blue. However, starting from the medium breakpoint and above \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"(md:text-green-500)\"), \", the text color changes to green.\"), mdx(\"table\", null, mdx(\"thead\", {\n    parentName: \"table\"\n  }, mdx(\"tr\", {\n    parentName: \"thead\"\n  }, mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Class\"), mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Properties\"))), mdx(\"tbody\", {\n    parentName: \"table\"\n  }, mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"text-transparent\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"color: transparent;\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"text-current\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"color: currentColor;\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"text-black\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"--tw-text-opacity: 1;color: rgba(0, 0, 0, var(--tw-text-opacity));\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"text-white\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"--tw-text-opacity: 1;color: rgba(255, 255, 255, var(--tw-text-opacity));\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"text-gray-50\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"--tw-text-opacity: 1;color: rgba(249, 250, 251, var(--tw-text-opacity));\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"text-gray-100\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"--tw-text-opacity: 1;color: rgba(243, 244, 246, var(--tw-text-opacity));\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"text-gray-200\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"--tw-text-opacity: 1;color: rgba(229, 231, 235, var(--tw-text-opacity));\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"text-gray-300\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"--tw-text-opacity: 1;color: rgba(209, 213, 219, var(--tw-text-opacity));\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"text-gray-400\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"--tw-text-opacity: 1;color: rgba(156, 163, 175, var(--tw-text-opacity));\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"text-gray-500\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"--tw-text-opacity: 1;color: rgba(107, 114, 128, var(--tw-text-opacity));\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"text-gray-600\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"--tw-text-opacity: 1;color: rgba(75, 85, 99, var(--tw-text-opacity));\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"text-gray-700\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"--tw-text-opacity: 1;color: rgba(55, 65, 81, var(--tw-text-opacity));\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"text-gray-800\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"--tw-text-opacity: 1;color: rgba(31, 41, 55, var(--tw-text-opacity));\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"text-gray-900\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"--tw-text-opacity: 1;color: rgba(17, 24, 39, var(--tw-text-opacity));\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"text-red-50\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"--tw-text-opacity: 1;color: rgba(254, 242, 242, var(--tw-text-opacity));\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"text-red-100\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"--tw-text-opacity: 1;color: rgba(254, 226, 226, var(--tw-text-opacity));\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"text-red-200\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"--tw-text-opacity: 1;color: rgba(254, 202, 202, var(--tw-text-opacity));\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"text-red-300\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"--tw-text-opacity: 1;color: rgba(252, 165, 165, var(--tw-text-opacity));\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"text-red-400\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"--tw-text-opacity: 1;color: rgba(248, 113, 113, var(--tw-text-opacity));\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"text-red-500\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"--tw-text-opacity: 1;color: rgba(239, 68, 68, var(--tw-text-opacity));\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"text-red-600\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"--tw-text-opacity: 1;color: rgba(220, 38, 38, var(--tw-text-opacity));\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"text-red-700\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"--tw-text-opacity: 1;color: rgba(185, 28, 28, var(--tw-text-opacity));\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"text-red-800\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"--tw-text-opacity: 1;color: rgba(153, 27, 27, var(--tw-text-opacity));\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"text-red-900\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"--tw-text-opacity: 1;color: rgba(127, 29, 29, var(--tw-text-opacity));\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"text-yellow-50\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"--tw-text-opacity: 1;color: rgba(255, 251, 235, var(--tw-text-opacity));\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"text-yellow-100\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"--tw-text-opacity: 1;color: rgba(254, 243, 199, var(--tw-text-opacity));\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"text-yellow-200\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"--tw-text-opacity: 1;color: rgba(253, 230, 138, var(--tw-text-opacity));\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"text-yellow-300\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"--tw-text-opacity: 1;color: rgba(252, 211, 77, var(--tw-text-opacity));\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"text-yellow-400\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"--tw-text-opacity: 1;color: rgba(251, 191, 36, var(--tw-text-opacity));\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"text-yellow-500\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"--tw-text-opacity: 1;color: rgba(245, 158, 11, var(--tw-text-opacity));\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"text-yellow-600\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"--tw-text-opacity: 1;color: rgba(217, 119, 6, var(--tw-text-opacity));\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"text-yellow-700\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"--tw-text-opacity: 1;color: rgba(180, 83, 9, var(--tw-text-opacity));\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"text-yellow-800\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"--tw-text-opacity: 1;color: rgba(146, 64, 14, var(--tw-text-opacity));\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"text-yellow-900\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"--tw-text-opacity: 1;color: rgba(120, 53, 15, var(--tw-text-opacity));\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"text-green-50\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"--tw-text-opacity: 1;color: rgba(236, 253, 245, var(--tw-text-opacity));\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"text-green-100\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"--tw-text-opacity: 1;color: rgba(209, 250, 229, var(--tw-text-opacity));\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"text-green-200\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"--tw-text-opacity: 1;color: rgba(167, 243, 208, var(--tw-text-opacity));\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"text-green-300\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"--tw-text-opacity: 1;color: rgba(110, 231, 183, var(--tw-text-opacity));\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"text-green-400\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"--tw-text-opacity: 1;color: rgba(52, 211, 153, var(--tw-text-opacity));\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"text-green-500\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"--tw-text-opacity: 1;color: rgba(16, 185, 129, var(--tw-text-opacity));\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"text-green-600\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"--tw-text-opacity: 1;color: rgba(5, 150, 105, var(--tw-text-opacity));\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"text-green-700\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"--tw-text-opacity: 1;color: rgba(4, 120, 87, var(--tw-text-opacity));\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"text-green-800\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"--tw-text-opacity: 1;color: rgba(6, 95, 70, var(--tw-text-opacity));\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"text-green-900\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"--tw-text-opacity: 1;color: rgba(6, 78, 59, var(--tw-text-opacity));\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"text-blue-50\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"--tw-text-opacity: 1;color: rgba(239, 246, 255, var(--tw-text-opacity));\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"text-blue-100\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"--tw-text-opacity: 1;color: rgba(219, 234, 254, var(--tw-text-opacity));\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"text-blue-200\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"--tw-text-opacity: 1;color: rgba(191, 219, 254, var(--tw-text-opacity));\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"text-blue-300\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"--tw-text-opacity: 1;color: rgba(147, 197, 253, var(--tw-text-opacity));\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"text-blue-400\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"--tw-text-opacity: 1;color: rgba(96, 165, 250, var(--tw-text-opacity));\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"text-blue-500\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"--tw-text-opacity: 1;color: rgba(59, 130, 246, var(--tw-text-opacity));\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"text-blue-600\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"--tw-text-opacity: 1;color: rgba(37, 99, 235, var(--tw-text-opacity));\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"text-blue-700\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"--tw-text-opacity: 1;color: rgba(29, 78, 216, var(--tw-text-opacity));\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"text-blue-800\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"--tw-text-opacity: 1;color: rgba(30, 64, 175, var(--tw-text-opacity));\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"text-blue-900\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"--tw-text-opacity: 1;color: rgba(30, 58, 138, var(--tw-text-opacity));\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"text-indigo-50\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"--tw-text-opacity: 1;color: rgba(238, 242, 255, var(--tw-text-opacity));\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"text-indigo-100\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"--tw-text-opacity: 1;color: rgba(224, 231, 255, var(--tw-text-opacity));\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"text-indigo-200\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"--tw-text-opacity: 1;color: rgba(199, 210, 254, var(--tw-text-opacity));\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"text-indigo-300\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"--tw-text-opacity: 1;color: rgba(165, 180, 252, var(--tw-text-opacity));\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"text-indigo-400\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"--tw-text-opacity: 1;color: rgba(129, 140, 248, var(--tw-text-opacity));\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"text-indigo-500\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"--tw-text-opacity: 1;color: rgba(99, 102, 241, var(--tw-text-opacity));\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"text-indigo-600\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"--tw-text-opacity: 1;color: rgba(79, 70, 229, var(--tw-text-opacity));\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"text-indigo-700\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"--tw-text-opacity: 1;color: rgba(67, 56, 202, var(--tw-text-opacity));\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"text-indigo-800\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"--tw-text-opacity: 1;color: rgba(55, 48, 163, var(--tw-text-opacity));\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"text-indigo-900\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"--tw-text-opacity: 1;color: rgba(49, 46, 129, var(--tw-text-opacity));\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"text-purple-50\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"--tw-text-opacity: 1;color: rgba(245, 243, 255, var(--tw-text-opacity));\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"text-purple-100\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"--tw-text-opacity: 1;color: rgba(237, 233, 254, var(--tw-text-opacity));\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"text-purple-200\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"--tw-text-opacity: 1;color: rgba(221, 214, 254, var(--tw-text-opacity));\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"text-purple-300\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"--tw-text-opacity: 1;color: rgba(196, 181, 253, var(--tw-text-opacity));\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"text-purple-400\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"--tw-text-opacity: 1;color: rgba(167, 139, 250, var(--tw-text-opacity));\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"text-purple-500\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"--tw-text-opacity: 1;color: rgba(139, 92, 246, var(--tw-text-opacity));\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"text-purple-600\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"--tw-text-opacity: 1;color: rgba(124, 58, 237, var(--tw-text-opacity));\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"text-purple-700\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"--tw-text-opacity: 1;color: rgba(109, 40, 217, var(--tw-text-opacity));\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"text-purple-800\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"--tw-text-opacity: 1;color: rgba(91, 33, 182, var(--tw-text-opacity));\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"text-purple-900\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"--tw-text-opacity: 1;color: rgba(76, 29, 149, var(--tw-text-opacity));\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"text-pink-50\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"--tw-text-opacity: 1;color: rgba(253, 242, 248, var(--tw-text-opacity));\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"text-pink-100\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"--tw-text-opacity: 1;color: rgba(252, 231, 243, var(--tw-text-opacity));\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"text-pink-200\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"--tw-text-opacity: 1;color: rgba(251, 207, 232, var(--tw-text-opacity));\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"text-pink-300\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"--tw-text-opacity: 1;color: rgba(249, 168, 212, var(--tw-text-opacity));\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"text-pink-400\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"--tw-text-opacity: 1;color: rgba(244, 114, 182, var(--tw-text-opacity));\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"text-pink-500\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"--tw-text-opacity: 1;color: rgba(236, 72, 153, var(--tw-text-opacity));\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"text-pink-600\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"--tw-text-opacity: 1;color: rgba(219, 39, 119, var(--tw-text-opacity));\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"text-pink-700\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"--tw-text-opacity: 1;color: rgba(190, 24, 93, var(--tw-text-opacity));\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"text-pink-800\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"--tw-text-opacity: 1;color: rgba(157, 23, 77, var(--tw-text-opacity));\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"text-pink-900\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"--tw-text-opacity: 1;color: rgba(131, 24, 67, var(--tw-text-opacity));\")))), mdx(\"h2\", null, \"Windframe Tailwind blocks\"), mdx(\"p\", null, mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https://app.windframe.dev/editor?id=header17\"\n  }, \"Landing page\")));\n}\n;\nMDXContent.isMDXComponent = true;","tableOfContents":{"items":[{"url":"#tailwind-text-color","title":"Tailwind Text Color","items":[{"url":"#applying-text-color","title":"Applying Text Color"},{"url":"#preview","title":"Preview"},{"url":"#color-variants","title":"Color Variants"},{"url":"#preview-1","title":"Preview"},{"url":"#tailwind-custom-colors","title":"Tailwind Custom Colors"},{"url":"#responsive-text-color","title":"Responsive Text Color"},{"url":"#windframe-tailwind-blocks","title":"Windframe Tailwind blocks"}]}]},"parent":{"__typename":"File","relativePath":"classes/tailwind-text-color.md"},"frontmatter":{"githubUrl":null,"metaTitle":"Tailwind CSS Text Color","lastUpdated":"20 May 2024","metaDescription":"The text-color utility class in Tailwind CSS allows you to easily set the color of text within elements."}}},"pageContext":{"id":"c3daacf9-b85c-5284-80ff-af8bab308d40"}},"staticQueryHashes":["2619113677","2619113677","2619113677","2619113677","2619113677","2619113677","2619113677","2619113677","3309287076","3309287076","3706406642","3706406642","3706406642","4045616534","4045616534","956403285"]}