Text Color

Utilities for controlling the text color of an element. Is it possible to find all colors references at this link

Table of classes#

Class

Properties

text-transparent

{"color":"transparent"}

text-black

{"color":"#000"}

text-white

{"color":"#fff"}

text-rose-50

{"color":"#fff1f2"}

text-rose-100

{"color":"#ffe4e6"}

text-rose-200

{"color":"#fecdd3"}

text-rose-300

{"color":"#fda4af"}

text-rose-400

{"color":"#fb7185"}

text-rose-500

{"color":"#f43f5e"}

text-rose-600

{"color":"#e11d48"}

text-rose-700

{"color":"#be123c"}

text-rose-800

{"color":"#9f1239"}

text-rose-900

{"color":"#881337"}

text-pink-50

{"color":"#fdf2f8"}

text-pink-100

{"color":"#fce7f3"}

text-pink-200

{"color":"#fbcfe8"}

text-pink-300

{"color":"#f9a8d4"}

text-pink-400

{"color":"#f472b6"}

text-pink-500

{"color":"#ec4899"}

text-pink-600

{"color":"#db2777"}

text-pink-700

{"color":"#be185d"}

text-pink-800

{"color":"#9d174d"}

text-pink-900

{"color":"#831843"}

text-fuchsia-50

{"color":"#fdf4ff"}

text-fuchsia-100

{"color":"#fae8ff"}

text-fuchsia-200

{"color":"#f5d0fe"}

text-fuchsia-300

{"color":"#f0abfc"}

text-fuchsia-400

{"color":"#e879f9"}

text-fuchsia-500

{"color":"#d946ef"}

text-fuchsia-600

{"color":"#c026d3"}

text-fuchsia-700

{"color":"#a21caf"}

text-fuchsia-800

{"color":"#86198f"}

text-fuchsia-900

{"color":"#701a75"}

text-purple-50

{"color":"#faf5ff"}

text-purple-100

{"color":"#f3e8ff"}

text-purple-200

{"color":"#e9d5ff"}

text-purple-300

{"color":"#d8b4fe"}

text-purple-400

{"color":"#c084fc"}

text-purple-500

{"color":"#a855f7"}

text-purple-600

{"color":"#9333ea"}

text-purple-700

{"color":"#7e22ce"}

text-purple-800

{"color":"#6b21a8"}

text-purple-900

{"color":"#581c87"}

text-violet-50

{"color":"#f5f3ff"}

text-violet-100

{"color":"#ede9fe"}

text-violet-200

{"color":"#ddd6fe"}

text-violet-300

{"color":"#c4b5fd"}

text-violet-400

{"color":"#a78bfa"}

text-violet-500

{"color":"#8b5cf6"}

text-violet-600

{"color":"#7c3aed"}

text-violet-700

{"color":"#6d28d9"}

text-violet-800

{"color":"#5b21b6"}

text-violet-900

{"color":"#4c1d95"}

text-indigo-50

{"color":"#eef2ff"}

text-indigo-100

{"color":"#e0e7ff"}

text-indigo-200

{"color":"#c7d2fe"}

text-indigo-300

{"color":"#a5b4fc"}

text-indigo-400

{"color":"#818cf8"}

text-indigo-500

{"color":"#6366f1"}

text-indigo-600

{"color":"#4f46e5"}

text-indigo-700

{"color":"#4338ca"}

text-indigo-800

{"color":"#3730a3"}

text-indigo-900

{"color":"#312e81"}

text-blue-50

{"color":"#eff6ff"}

text-blue-100

{"color":"#dbeafe"}

text-blue-200

{"color":"#bfdbfe"}

text-blue-300

{"color":"#93c5fd"}

text-blue-400

{"color":"#60a5fa"}

text-blue-500

{"color":"#3b82f6"}

text-blue-600

{"color":"#2563eb"}

text-blue-700

{"color":"#1d4ed8"}

text-blue-800

{"color":"#1e40af"}

text-blue-900

{"color":"#1e3a8a"}

text-lightBlue-50

{"color":"#f0f9ff"}

text-lightBlue-100

{"color":"#e0f2fe"}

text-lightBlue-200

{"color":"#bae6fd"}

text-lightBlue-300

{"color":"#7dd3fc"}

text-lightBlue-400

{"color":"#38bdf8"}

text-lightBlue-500

{"color":"#0ea5e9"}

text-lightBlue-600

{"color":"#0284c7"}

text-lightBlue-700

{"color":"#0369a1"}

text-lightBlue-800

{"color":"#075985"}

text-lightBlue-900

{"color":"#0c4a6e"}

text-sky-50

{"color":"#f0f9ff"}

text-sky-100

{"color":"#e0f2fe"}

text-sky-200

{"color":"#bae6fd"}

text-sky-300

{"color":"#7dd3fc"}

text-sky-400

{"color":"#38bdf8"}

text-sky-500

{"color":"#0ea5e9"}

text-sky-600

{"color":"#0284c7"}

text-sky-700

{"color":"#0369a1"}

text-sky-800

{"color":"#075985"}

text-sky-900

{"color":"#0c4a6e"}

text-cyan-50

{"color":"#ecfeff"}

text-cyan-100

{"color":"#cffafe"}

text-cyan-200

{"color":"#a5f3fc"}

text-cyan-300

{"color":"#67e8f9"}

text-cyan-400

{"color":"#22d3ee"}

text-cyan-500

{"color":"#06b6d4"}

text-cyan-600

{"color":"#0891b2"}

text-cyan-700

{"color":"#0e7490"}

text-cyan-800

{"color":"#155e75"}

text-cyan-900

{"color":"#164e63"}

text-teal-50

{"color":"#f0fdfa"}

text-teal-100

{"color":"#ccfbf1"}

text-teal-200

{"color":"#99f6e4"}

text-teal-300

{"color":"#5eead4"}

text-teal-400

{"color":"#2dd4bf"}

text-teal-500

{"color":"#14b8a6"}

text-teal-600

{"color":"#0d9488"}

text-teal-700

{"color":"#0f766e"}

text-teal-800

{"color":"#115e59"}

text-teal-900

{"color":"#134e4a"}

text-emerald-50

{"color":"#ecfdf5"}

text-emerald-100

{"color":"#d1fae5"}

text-emerald-200

{"color":"#a7f3d0"}

text-emerald-300

{"color":"#6ee7b7"}

text-emerald-400

{"color":"#34d399"}

text-emerald-500

{"color":"#10b981"}

text-emerald-600

{"color":"#059669"}

text-emerald-700

{"color":"#047857"}

text-emerald-800

{"color":"#065f46"}

text-emerald-900

{"color":"#064e3b"}

text-green-50

{"color":"#f0fdf4"}

text-green-100

{"color":"#dcfce7"}

text-green-200

{"color":"#bbf7d0"}

text-green-300

{"color":"#86efac"}

text-green-400

{"color":"#4ade80"}

text-green-500

{"color":"#22c55e"}

text-green-600

{"color":"#16a34a"}

text-green-700

{"color":"#15803d"}

text-green-800

{"color":"#166534"}

text-green-900

{"color":"#14532d"}

text-lime-50

{"color":"#f7fee7"}

text-lime-100

{"color":"#ecfccb"}

text-lime-200

{"color":"#d9f99d"}

text-lime-300

{"color":"#bef264"}

text-lime-400

{"color":"#a3e635"}

text-lime-500

{"color":"#84cc16"}

text-lime-600

{"color":"#65a30d"}

text-lime-700

{"color":"#4d7c0f"}

text-lime-800

{"color":"#3f6212"}

text-lime-900

{"color":"#365314"}

text-yellow-50

{"color":"#fefce8"}

text-yellow-100

{"color":"#fef9c3"}

text-yellow-200

{"color":"#fef08a"}

text-yellow-300

{"color":"#fde047"}

text-yellow-400

{"color":"#facc15"}

text-yellow-500

{"color":"#eab308"}

text-yellow-600

{"color":"#ca8a04"}

text-yellow-700

{"color":"#a16207"}

text-yellow-800

{"color":"#854d0e"}

text-yellow-900

{"color":"#713f12"}

text-amber-50

{"color":"#fffbeb"}

text-amber-100

{"color":"#fef3c7"}

text-amber-200

{"color":"#fde68a"}

text-amber-300

{"color":"#fcd34d"}

text-amber-400

{"color":"#fbbf24"}

text-amber-500

{"color":"#f59e0b"}

text-amber-600

{"color":"#d97706"}

text-amber-700

{"color":"#b45309"}

text-amber-800

{"color":"#92400e"}

text-amber-900

{"color":"#78350f"}

text-orange-50

{"color":"#fff7ed"}

text-orange-100

{"color":"#ffedd5"}

text-orange-200

{"color":"#fed7aa"}

text-orange-300

{"color":"#fdba74"}

text-orange-400

{"color":"#fb923c"}

text-orange-500

{"color":"#f97316"}

text-orange-600

{"color":"#ea580c"}

text-orange-700

{"color":"#c2410c"}

text-orange-800

{"color":"#9a3412"}

text-orange-900

{"color":"#7c2d12"}

text-red-50

{"color":"#fef2f2"}

text-red-100

{"color":"#fee2e2"}

text-red-200

{"color":"#fecaca"}

text-red-300

{"color":"#fca5a5"}

text-red-400

{"color":"#f87171"}

text-red-500

{"color":"#ef4444"}

text-red-600

{"color":"#dc2626"}

text-red-700

{"color":"#b91c1c"}

text-red-800

{"color":"#991b1b"}

text-red-900

{"color":"#7f1d1d"}

text-warmGray-50

{"color":"#fafaf9"}

text-warmGray-100

{"color":"#f5f5f4"}

text-warmGray-200

{"color":"#e7e5e4"}

text-warmGray-300

{"color":"#d6d3d1"}

text-warmGray-400

{"color":"#a8a29e"}

text-warmGray-500

{"color":"#78716c"}

text-warmGray-600

{"color":"#57534e"}

text-warmGray-700

{"color":"#44403c"}

text-warmGray-800

{"color":"#292524"}

text-warmGray-900

{"color":"#1c1917"}

text-trueGray-50

{"color":"#fafafa"}

text-trueGray-100

{"color":"#f5f5f5"}

text-trueGray-200

{"color":"#e5e5e5"}

text-trueGray-300

{"color":"#d4d4d4"}

text-trueGray-400

{"color":"#a3a3a3"}

text-trueGray-500

{"color":"#737373"}

text-trueGray-600

{"color":"#525252"}

text-trueGray-700

{"color":"#404040"}

text-trueGray-800

{"color":"#262626"}

text-trueGray-900

{"color":"#171717"}

text-gray-50

{"color":"#fafafa"}

text-gray-100

{"color":"#f4f4f5"}

text-gray-200

{"color":"#e4e4e7"}

text-gray-300

{"color":"#d4d4d8"}

text-gray-400

{"color":"#a1a1aa"}

text-gray-500

{"color":"#71717a"}

text-gray-600

{"color":"#52525b"}

text-gray-700

{"color":"#3f3f46"}

text-gray-800

{"color":"#27272a"}

text-gray-900

{"color":"#18181b"}

text-coolGray-50

{"color":"#f9fafb"}

text-coolGray-100

{"color":"#f3f4f6"}

text-coolGray-200

{"color":"#e5e7eb"}

text-coolGray-300

{"color":"#d1d5db"}

text-coolGray-400

{"color":"#9ca3af"}

text-coolGray-500

{"color":"#6b7280"}

text-coolGray-600

{"color":"#4b5563"}

text-coolGray-700

{"color":"#374151"}

text-coolGray-800

{"color":"#1f2937"}

text-coolGray-900

{"color":"#111827"}

text-blueGray-50

{"color":"#f8fafc"}

text-blueGray-100

{"color":"#f1f5f9"}

text-blueGray-200

{"color":"#e2e8f0"}

text-blueGray-300

{"color":"#cbd5e1"}

text-blueGray-400

{"color":"#94a3b8"}

text-blueGray-500

{"color":"#64748b"}

text-blueGray-600

{"color":"#475569"}

text-blueGray-700

{"color":"#334155"}

text-blueGray-800

{"color":"#1e293b"}

text-blueGray-900

{"color":"#0f172a"}

Customization#

info

To get an introduction on how customization works, it is recommended to visit the dedicated page in the documentation

To customize the classes regarding the text colors, you go to modify the fields under the property called colors.

wind.config.js

import { customize } from "react-native-wind";
customize({  theme: {    colors: {      primary: "#333333",      secondary: {        light: "#ffffff", // Light shade        dark: "#000000", // Dark shade      },    },  },});

As show in the example block, there are 2 ways to customize colors:

Immediatly write the color as the value
Specify an object with shades of that color

The library will automatically generate classes for every other utility that use colors, in the text color case as:

The first option with just the color value generate the class text-primary
The second option with the specified shades generate the classes text-secondary-light text-secondary-dark