Tailwind CSSには、テキスト、背景及び境界線の色を指定するためのクラスが用意されている。これらの一覧を次に示す。
Tailwind CSS を使って背景色を指定するには、次に示すクラスを指定する。
<p class="bg-transparent">bg-transparent</p>
<p class="bg-white">bg-white</p>
<p class="bg-gray-100">bg-gray-100</p>
<p class="bg-gray-200">bg-gray-200</p>
<p class="bg-gray-300">bg-gray-300</p>
<p class="bg-gray-400">bg-gray-400</p>
<p class="bg-gray-500">bg-gray-500</p>
<p class="bg-gray-600 text-white">bg-gray-600</p>
<p class="bg-gray-700 text-white">bg-gray-700</p>
<p class="bg-gray-800 text-white">bg-gray-800</p>
<p class="bg-gray-900 text-white">bg-gray-900</p>
<p class="bg-black text-white">bg-black</p>bg-transparent
bg-white
bg-gray-100
bg-gray-200
bg-gray-300
bg-gray-400
bg-gray-500
bg-gray-600
bg-gray-700
bg-gray-800
bg-gray-900
bg-black
<p class="bg-slate-100">bg-slate-100</p>
<p class="bg-slate-200">bg-slate-200</p>
<p class="bg-slate-300">bg-slate-300</p>
<p class="bg-slate-400">bg-slate-400</p>
<p class="bg-slate-500">bg-slate-500</p>
<p class="bg-slate-600 text-white">bg-slate-600</p>
<p class="bg-slate-700 text-white">bg-slate-700</p>
<p class="bg-slate-800 text-white">bg-slate-800</p>
<p class="bg-slate-900 text-white">bg-slate-900</p>bg-slate-100
bg-slate-200
bg-slate-300
bg-slate-400
bg-slate-500
bg-slate-600
bg-slate-700
bg-slate-800
bg-slate-900
<p class="bg-red-100">bg-red-100</p>
<p class="bg-red-200">bg-red-200</p>
<p class="bg-red-300">bg-red-300</p>
<p class="bg-red-400">bg-red-400</p>
<p class="bg-red-500">bg-red-500</p>
<p class="bg-red-600">bg-red-600</p>
<p class="bg-red-700">bg-red-700</p>
<p class="bg-red-800">bg-red-800</p>
<p class="bg-red-900">bg-red-900</p>bg-red-100
bg-red-200
bg-red-300
bg-red-400
bg-red-500
bg-red-600
bg-red-700
bg-red-800
bg-red-900
<p class="bg-orange-100">bg-orange-100</p>
<p class="bg-orange-200">bg-orange-200</p>
<p class="bg-orange-300">bg-orange-300</p>
<p class="bg-orange-400">bg-orange-400</p>
<p class="bg-orange-500">bg-orange-500</p>
<p class="bg-orange-600">bg-orange-600</p>
<p class="bg-orange-700">bg-orange-700</p>
<p class="bg-orange-800">bg-orange-800</p>
<p class="bg-orange-900">bg-orange-900</p>bg-orange-100
bg-orange-200
bg-orange-300
bg-orange-400
bg-orange-500
bg-orange-600
bg-orange-700
bg-orange-800
bg-orange-900
<p class="bg-amber-100">bg-amber-100</p>
<p class="bg-amber-200">bg-amber-200</p>
<p class="bg-amber-300">bg-amber-300</p>
<p class="bg-amber-400">bg-amber-400</p>
<p class="bg-amber-500">bg-amber-500</p>
<p class="bg-amber-600">bg-amber-600</p>
<p class="bg-amber-700">bg-amber-700</p>
<p class="bg-amber-800">bg-amber-800</p>
<p class="bg-amber-900">bg-amber-900</p>bg-amber-100
bg-amber-200
bg-amber-300
bg-amber-400
bg-amber-500
bg-amber-600
bg-amber-700
bg-amber-800
bg-amber-900
<p class="bg-yellow-100">bg-yellow-100</p>
<p class="bg-yellow-200">bg-yellow-200</p>
<p class="bg-yellow-300">bg-yellow-300</p>
<p class="bg-yellow-400">bg-yellow-400</p>
<p class="bg-yellow-500">bg-yellow-500</p>
<p class="bg-yellow-600">bg-yellow-600</p>
<p class="bg-yellow-700">bg-yellow-700</p>
<p class="bg-yellow-800">bg-yellow-800</p>
<p class="bg-yellow-900">bg-yellow-900</p>bg-yellow-100
bg-yellow-200
bg-yellow-300
bg-yellow-400
bg-yellow-500
bg-yellow-600
bg-yellow-700
bg-yellow-800
bg-yellow-900
<p class="bg-lime-100">bg-lime-100</p>
<p class="bg-lime-200">bg-lime-200</p>
<p class="bg-lime-300">bg-lime-300</p>
<p class="bg-lime-400">bg-lime-400</p>
<p class="bg-lime-500">bg-lime-500</p>
<p class="bg-lime-600">bg-lime-600</p>
<p class="bg-lime-700">bg-lime-700</p>
<p class="bg-lime-800">bg-lime-800</p>
<p class="bg-lime-900">bg-lime-900</p>bg-lime-100
bg-lime-200
bg-lime-300
bg-lime-400
bg-lime-500
bg-lime-600
bg-lime-700
bg-lime-800
bg-lime-900
<p class="bg-green-100">bg-green-100</p>
<p class="bg-green-200">bg-green-200</p>
<p class="bg-green-300">bg-green-300</p>
<p class="bg-green-400">bg-green-400</p>
<p class="bg-green-500">bg-green-500</p>
<p class="bg-green-600">bg-green-600</p>
<p class="bg-green-700">bg-green-700</p>
<p class="bg-green-800">bg-green-800</p>
<p class="bg-green-900">bg-green-900</p>bg-green-100
bg-green-200
bg-green-300
bg-green-400
bg-green-500
bg-green-600
bg-green-700
bg-green-800
bg-green-900
<p class="bg-emerald-100">bg-emerald-100</p>
<p class="bg-emerald-200">bg-emerald-200</p>
<p class="bg-emerald-300">bg-emerald-300</p>
<p class="bg-emerald-400">bg-emerald-400</p>
<p class="bg-emerald-500">bg-emerald-500</p>
<p class="bg-emerald-600">bg-emerald-600</p>
<p class="bg-emerald-700">bg-emerald-700</p>
<p class="bg-emerald-800">bg-emerald-800</p>
<p class="bg-emerald-900">bg-emerald-900</p>bg-emerald-100
bg-emerald-200
bg-emerald-300
bg-emerald-400
bg-emerald-500
bg-emerald-600
bg-emerald-700
bg-emerald-800
bg-emerald-900
<p class="bg-teal-100">bg-teal-100</p>
<p class="bg-teal-200">bg-teal-200</p>
<p class="bg-teal-300">bg-teal-300</p>
<p class="bg-teal-400">bg-teal-400</p>
<p class="bg-teal-500">bg-teal-500</p>
<p class="bg-teal-600">bg-teal-600</p>
<p class="bg-teal-700">bg-teal-700</p>
<p class="bg-teal-800">bg-teal-800</p>
<p class="bg-teal-900">bg-teal-900</p>bg-teal-100
bg-teal-200
bg-teal-300
bg-teal-400
bg-teal-500
bg-teal-600
bg-teal-700
bg-teal-800
bg-teal-900
<p class="bg-cyan-100">bg-cyan-100</p>
<p class="bg-cyan-200">bg-cyan-200</p>
<p class="bg-cyan-300">bg-cyan-300</p>
<p class="bg-cyan-400">bg-cyan-400</p>
<p class="bg-cyan-500">bg-cyan-500</p>
<p class="bg-cyan-600">bg-cyan-600</p>
<p class="bg-cyan-700">bg-cyan-700</p>
<p class="bg-cyan-800">bg-cyan-800</p>
<p class="bg-cyan-900">bg-cyan-900</p>bg-cyan-100
bg-cyan-200
bg-cyan-300
bg-cyan-400
bg-cyan-500
bg-cyan-600
bg-cyan-700
bg-cyan-800
bg-cyan-900
<p class="bg-sky-100">bg-sky-100</p>
<p class="bg-sky-200">bg-sky-200</p>
<p class="bg-sky-300">bg-sky-300</p>
<p class="bg-sky-400">bg-sky-400</p>
<p class="bg-sky-500">bg-sky-500</p>
<p class="bg-sky-600">bg-sky-600</p>
<p class="bg-sky-700">bg-sky-700</p>
<p class="bg-sky-800">bg-sky-800</p>
<p class="bg-sky-900">bg-sky-900</p>bg-sky-100
bg-sky-200
bg-sky-300
bg-sky-400
bg-sky-500
bg-sky-600
bg-sky-700
bg-sky-800
bg-sky-900
<p class="bg-blue-100">bg-blue-100</p>
<p class="bg-blue-200">bg-blue-200</p>
<p class="bg-blue-300">bg-blue-300</p>
<p class="bg-blue-400">bg-blue-400</p>
<p class="bg-blue-500">bg-blue-500</p>
<p class="bg-blue-600">bg-blue-600</p>
<p class="bg-blue-700">bg-blue-700</p>
<p class="bg-blue-800">bg-blue-800</p>
<p class="bg-blue-900">bg-blue-900</p>.bg-blue-100
.bg-blue-200
.bg-blue-300
.bg-blue-400
.bg-blue-500
.bg-blue-600
.bg-blue-700
.bg-blue-800
.bg-blue-900
<p class="bg-indigo-100">bg-indigo-100</p>
<p class="bg-indigo-200">bg-indigo-200</p>
<p class="bg-indigo-300">bg-indigo-300</p>
<p class="bg-indigo-400">bg-indigo-400</p>
<p class="bg-indigo-500">bg-indigo-500</p>
<p class="bg-indigo-600">bg-indigo-600</p>
<p class="bg-indigo-700">bg-indigo-700</p>
<p class="bg-indigo-800">bg-indigo-800</p>
<p class="bg-indigo-900">bg-indigo-900</p>bg-indigo-100
bg-indigo-200
bg-indigo-300
bg-indigo-400
bg-indigo-500
bg-indigo-600
bg-indigo-700
bg-indigo-800
bg-indigo-900
<p class="bg-violet-100">bg-violet-100</p>
<p class="bg-violet-200">bg-violet-200</p>
<p class="bg-violet-300">bg-violet-300</p>
<p class="bg-violet-400">bg-violet-400</p>
<p class="bg-violet-500">bg-violet-500</p>
<p class="bg-violet-600">bg-violet-600</p>
<p class="bg-violet-700">bg-violet-700</p>
<p class="bg-violet-800">bg-violet-800</p>
<p class="bg-violet-900">bg-violet-900</p>bg-violet-100
bg-violet-200
bg-violet-300
bg-violet-400
bg-violet-500
bg-violet-600
bg-violet-700
bg-violet-800
bg-violet-900
<p class="bg-purple-100">bg-purple-100</p>
<p class="bg-purple-200">bg-purple-200</p>
<p class="bg-purple-300">bg-purple-300</p>
<p class="bg-purple-400">bg-purple-400</p>
<p class="bg-purple-500">bg-purple-500</p>
<p class="bg-purple-600">bg-purple-600</p>
<p class="bg-purple-700">bg-purple-700</p>
<p class="bg-purple-800">bg-purple-800</p>
<p class="bg-purple-900">bg-purple-900</p>bg-purple-100
bg-purple-200
bg-purple-300
bg-purple-400
bg-purple-500
bg-purple-600
bg-purple-700
bg-purple-800
bg-purple-900
<p class="bg-fuchsia-100">bg-fuchsia-100</p>
<p class="bg-fuchsia-200">bg-fuchsia-200</p>
<p class="bg-fuchsia-300">bg-fuchsia-300</p>
<p class="bg-fuchsia-400">bg-fuchsia-400</p>
<p class="bg-fuchsia-500">bg-fuchsia-500</p>
<p class="bg-fuchsia-600">bg-fuchsia-600</p>
<p class="bg-fuchsia-700">bg-fuchsia-700</p>
<p class="bg-fuchsia-800">bg-fuchsia-800</p>
<p class="bg-fuchsia-900">bg-fuchsia-900</p>bg-fuchsia-100
bg-fuchsia-200
bg-fuchsia-300
bg-fuchsia-400
bg-fuchsia-500
bg-fuchsia-600
bg-fuchsia-700
bg-fuchsia-800
bg-fuchsia-900
<p class="bg-pink-100">bg-pink-100</p>
<p class="bg-pink-200">bg-pink-200</p>
<p class="bg-pink-300">bg-pink-300</p>
<p class="bg-pink-400">bg-pink-400</p>
<p class="bg-pink-500">bg-pink-500</p>
<p class="bg-pink-600">bg-pink-600</p>
<p class="bg-pink-700">bg-pink-700</p>
<p class="bg-pink-800">bg-pink-800</p>
<p class="bg-pink-900">bg-pink-900</p>bg-pink-100
bg-pink-200
bg-pink-300
bg-pink-400
bg-pink-500
bg-pink-600
bg-pink-700
bg-pink-800
bg-pink-900
<p class="bg-rose-100">bg-rose-100</p>
<p class="bg-rose-200">bg-rose-200</p>
<p class="bg-rose-300">bg-rose-300</p>
<p class="bg-rose-400">bg-rose-400</p>
<p class="bg-rose-500">bg-rose-500</p>
<p class="bg-rose-600">bg-rose-600</p>
<p class="bg-rose-700">bg-rose-700</p>
<p class="bg-rose-800">bg-rose-800</p>
<p class="bg-rose-900">bg-rose-900</p>bg-rose-100
bg-rose-200
bg-rose-300
bg-rose-400
bg-rose-500
bg-rose-600
bg-rose-700
bg-rose-800
bg-rose-900
Tailwind CSS を使って境界線の色を指定するには、border クラスに加えて、次に示すクラスを指定する。
<p class="border border-transparent">border-transparent</p>
<p class="border border-white">border-white</p>
<p class="border border-gray-100">border-gray-100</p>
<p class="border border-gray-200">border-gray-200</p>
<p class="border border-gray-300">border-gray-300</p>
<p class="border border-gray-400">border-gray-400</div>
<p class="border border-gray-500">border-gray-500</p>
<p class="border border-gray-600">border-gray-600</p>
<p class="border border-gray-700">border-gray-700</p>
<p class="border border-gray-800">border-gray-800</p>
<p class="border border-gray-900">border-gray-900</p>
<p class="border border-black">border-black</p>border-transparent
border-white
border-gray-100
border-gray-200
border-gray-300
border-gray-400
border-gray-500
border-gray-600
border-gray-700
border-gray-800
border-gray-900
border-black
Tailwind CSS を使って下線の色を指定するには、underline クラスに加えて、次に示すクラスを指定する。
<p class="underline decoration-transparent">decoration-transparent</p>
<p class="underline decoration-white">decoration-white</p>
<p class="underline decoration-gray-100">decoration-gray-100</p>
<p class="underline decoration-gray-200">decoration-gray-200</p>
<p class="underline decoration-gray-300">decoration-gray-300</p>
<p class="underline decoration-gray-400">decoration-gray-400</p>
<p class="underline decoration-gray-500">decoration-gray-500</p>
<p class="underline decoration-gray-600">decoration-gray-600</p>
<p class="underline decoration-gray-700">decoration-gray-700</p>
<p class="underline decoration-gray-800">decoration-gray-800</p>
<p class="underline decoration-gray-100">decoration-gray-900</p>
<p class="underline decoration-black">decoration-black</p>decoration-transparent
decoration-white
decoration-gray-100
decoration-gray-200
decoration-gray-300
decoration-gray-400
decoration-gray-500
decoration-gray-600
decoration-gray-700
decoration-gray-800
decoration-gray-900
decoration-black
<p class="underline decoration-red-100">decoration-red-100</p>
<p class="underline decoration-red-200">decoration-red-200</p>
<p class="underline decoration-red-300">decoration-red-300</p>
<p class="underline decoration-red-400">decoration-red-400</p>
<p class="underline decoration-red-500">decoration-red-500</p>
<p class="underline decoration-red-600">decoration-red-600</p>
<p class="underline decoration-red-700">decoration-red-700</p>
<p class="underline decoration-red-800">decoration-red-800</p>
<p class="underline decoration-red-100">decoration-red-900</p>decoration-red-100
decoration-red-200
decoration-red-300
decoration-red-400
decoration-red-500
decoration-red-600
decoration-red-700
decoration-red-800
decoration-red-900
Tailwind CSS を使ってテキスト（文字）の色を指定するには、次に示すクラスを指定する。
<p class="text-transparent">text-transparent</p>
<p class="text-white bg-gray-600">text-white</p>
<p class="text-gray-100">text-gray-100</p>
<p class="text-gray-200">text-gray-200</p>
<p class="text-gray-300">text-gray-300</p>
<p class="text-gray-400">text-gray-400</p>
<p class="text-gray-500">text-gray-500</p>
<p class="text-gray-600">text-gray-600</p>
<p class="text-gray-700">text-gray-700</p>
<p class="text-gray-800">text-gray-800</p>
<p class="text-gray-100">text-gray-900</p>
<p class="text-black">text-black</p>text-transparent
text-white
text-gray-100
text-gray-200
text-gray-300
text-gray-400
text-gray-500
text-gray-600
text-gray-700
text-gray-800
text-gray-900
text-black
<p class="text-red-100">text-red-100</p>
<p class="text-red-200">text-red-200</p>
<p class="text-red-200">text-red-200</p>
<p class="text-red-300">text-red-300</p>
<p class="text-red-400">text-red-400</p>
<p class="text-red-500">text-red-500</p>
<p class="text-red-600">text-red-600</p>
<p class="text-red-700">text-red-700</p>
<p class="text-red-800">text-red-800</p>
<p class="text-red-900">text-red-900</p>text-red-100
text-red-200
text-red-300
text-red-400
text-red-500
text-red-600
text-red-700
text-red-800
text-red-900
<p class="text-yellow-100">text-yellow-100</p>
<p class="text-yellow-200">text-yellow-200</p>
<p class="text-yellow-200">text-yellow-200</p>
<p class="text-yellow-300">text-yellow-300</p>
<p class="text-yellow-400">text-yellow-400</p>
<p class="text-yellow-500">text-yellow-500</p>
<p class="text-yellow-600">text-yellow-600</p>
<p class="text-yellow-700">text-yellow-700</p>
<p class="text-yellow-800">text-yellow-800</p>
<p class="text-yellow-900">text-yellow-900</p>text-yellow-100
text-yellow-200
text-yellow-300
text-yellow-400
text-yellow-500
text-yellow-600
text-yellow-700
text-yellow-800
text-yellow-900
<p class="text-green-100">text-green-100</p>
<p class="text-green-200">text-green-200</p>
<p class="text-green-200">text-green-200</p>
<p class="text-green-300">text-green-300</p>
<p class="text-green-400">text-green-400</p>
<p class="text-green-500">text-green-500</p>
<p class="text-green-600">text-green-600</p>
<p class="text-green-700">text-green-700</p>
<p class="text-green-800">text-green-800</p>
<p class="text-green-900">text-green-900</p>text-green-100
text-green-200
text-green-300
text-green-400
text-green-500
text-green-600
text-green-700
text-green-800
text-green-900
<p class="text-blue-100">text-blue-100</p>
<p class="text-blue-200">text-blue-200</p>
<p class="text-blue-200">text-blue-200</p>
<p class="text-blue-300">text-blue-300</p>
<p class="text-blue-400">text-blue-400</p>
<p class="text-blue-500">text-blue-500</p>
<p class="text-blue-600">text-blue-600</p>
<p class="text-blue-700">text-blue-700</p>
<p class="text-blue-800">text-blue-800</p>
<p class="text-blue-900">text-blue-900</p>text-blue-100
text-blue-200
text-blue-300
text-blue-400
text-blue-500
text-blue-600
text-blue-700
text-blue-800
text-blue-900
<p class="text-indigo-100">text-indigo-100</p>
<p class="text-indigo-200">text-indigo-200</p>
<p class="text-indigo-200">text-indigo-200</p>
<p class="text-indigo-300">text-indigo-300</p>
<p class="text-indigo-400">text-indigo-400</p>
<p class="text-indigo-500">text-indigo-500</p>
<p class="text-indigo-600">text-indigo-600</p>
<p class="text-indigo-700">text-indigo-700</p>
<p class="text-indigo-800">text-indigo-800</p>
<p class="text-indigo-900">text-indigo-900</p>text-indigo-100
text-indigo-200
text-indigo-300
text-indigo-400
text-indigo-500
text-indigo-600
text-indigo-700
text-indigo-800
text-indigo-900
<p class="text-purple-100">text-purple-100</p>
<p class="text-purple-200">text-purple-200</p>
<p class="text-purple-200">text-purple-200</p>
<p class="text-purple-300">text-purple-300</p>
<p class="text-purple-400">text-purple-400</p>
<p class="text-purple-500">text-purple-500</p>
<p class="text-purple-600">text-purple-600</p>
<p class="text-purple-700">text-purple-700</p>
<p class="text-purple-800">text-purple-800</p>
<p class="text-purple-900">text-purple-900</p>text-purple-100
text-purple-200
text-purple-300
text-purple-400
text-purple-500
text-purple-600
text-purple-700
text-purple-800
text-purple-900
<p class="text-pink-100">text-pink-100</p>
<p class="text-pink-200">text-pink-200</p>
<p class="text-pink-200">text-pink-200</p>
<p class="text-pink-300">text-pink-300</p>
<p class="text-pink-400">text-pink-400</p>
<p class="text-pink-500">text-pink-500</p>
<p class="text-pink-600">text-pink-600</p>
<p class="text-pink-700">text-pink-700</p>
<p class="text-pink-800">text-pink-800</p>
<p class="text-pink-900">text-pink-900</p>text-pink-100
text-pink-200
text-pink-300
text-pink-400
text-pink-500
text-pink-600
text-pink-700
text-pink-800
text-pink-900