Background color

Utilities for controlling an element's background color.

Table of classes#

Class

Properties

bg-transparent

{"backgroundColor":"transparent"}

bg-black

{"backgroundColor":"#000"}

bg-white

{"backgroundColor":"#fff"}

bg-rose-50

{"backgroundColor":"#fff1f2"}

bg-rose-100

{"backgroundColor":"#ffe4e6"}

bg-rose-200

{"backgroundColor":"#fecdd3"}

bg-rose-300

{"backgroundColor":"#fda4af"}

bg-rose-400

{"backgroundColor":"#fb7185"}

bg-rose-500

{"backgroundColor":"#f43f5e"}

bg-rose-600

{"backgroundColor":"#e11d48"}

bg-rose-700

{"backgroundColor":"#be123c"}

bg-rose-800

{"backgroundColor":"#9f1239"}

bg-rose-900

{"backgroundColor":"#881337"}

bg-pink-50

{"backgroundColor":"#fdf2f8"}

bg-pink-100

{"backgroundColor":"#fce7f3"}

bg-pink-200

{"backgroundColor":"#fbcfe8"}

bg-pink-300

{"backgroundColor":"#f9a8d4"}

bg-pink-400

{"backgroundColor":"#f472b6"}

bg-pink-500

{"backgroundColor":"#ec4899"}

bg-pink-600

{"backgroundColor":"#db2777"}

bg-pink-700

{"backgroundColor":"#be185d"}

bg-pink-800

{"backgroundColor":"#9d174d"}

bg-pink-900

{"backgroundColor":"#831843"}

bg-fuchsia-50

{"backgroundColor":"#fdf4ff"}

bg-fuchsia-100

{"backgroundColor":"#fae8ff"}

bg-fuchsia-200

{"backgroundColor":"#f5d0fe"}

bg-fuchsia-300

{"backgroundColor":"#f0abfc"}

bg-fuchsia-400

{"backgroundColor":"#e879f9"}

bg-fuchsia-500

{"backgroundColor":"#d946ef"}

bg-fuchsia-600

{"backgroundColor":"#c026d3"}

bg-fuchsia-700

{"backgroundColor":"#a21caf"}

bg-fuchsia-800

{"backgroundColor":"#86198f"}

bg-fuchsia-900

{"backgroundColor":"#701a75"}

bg-purple-50

{"backgroundColor":"#faf5ff"}

bg-purple-100

{"backgroundColor":"#f3e8ff"}

bg-purple-200

{"backgroundColor":"#e9d5ff"}

bg-purple-300

{"backgroundColor":"#d8b4fe"}

bg-purple-400

{"backgroundColor":"#c084fc"}

bg-purple-500

{"backgroundColor":"#a855f7"}

bg-purple-600

{"backgroundColor":"#9333ea"}

bg-purple-700

{"backgroundColor":"#7e22ce"}

bg-purple-800

{"backgroundColor":"#6b21a8"}

bg-purple-900

{"backgroundColor":"#581c87"}

bg-violet-50

{"backgroundColor":"#f5f3ff"}

bg-violet-100

{"backgroundColor":"#ede9fe"}

bg-violet-200

{"backgroundColor":"#ddd6fe"}

bg-violet-300

{"backgroundColor":"#c4b5fd"}

bg-violet-400

{"backgroundColor":"#a78bfa"}

bg-violet-500

{"backgroundColor":"#8b5cf6"}

bg-violet-600

{"backgroundColor":"#7c3aed"}

bg-violet-700

{"backgroundColor":"#6d28d9"}

bg-violet-800

{"backgroundColor":"#5b21b6"}

bg-violet-900

{"backgroundColor":"#4c1d95"}

bg-indigo-50

{"backgroundColor":"#eef2ff"}

bg-indigo-100

{"backgroundColor":"#e0e7ff"}

bg-indigo-200

{"backgroundColor":"#c7d2fe"}

bg-indigo-300

{"backgroundColor":"#a5b4fc"}

bg-indigo-400

{"backgroundColor":"#818cf8"}

bg-indigo-500

{"backgroundColor":"#6366f1"}

bg-indigo-600

{"backgroundColor":"#4f46e5"}

bg-indigo-700

{"backgroundColor":"#4338ca"}

bg-indigo-800

{"backgroundColor":"#3730a3"}

bg-indigo-900

{"backgroundColor":"#312e81"}

bg-blue-50

{"backgroundColor":"#eff6ff"}

bg-blue-100

{"backgroundColor":"#dbeafe"}

bg-blue-200

{"backgroundColor":"#bfdbfe"}

bg-blue-300

{"backgroundColor":"#93c5fd"}

bg-blue-400

{"backgroundColor":"#60a5fa"}

bg-blue-500

{"backgroundColor":"#3b82f6"}

bg-blue-600

{"backgroundColor":"#2563eb"}

bg-blue-700

{"backgroundColor":"#1d4ed8"}

bg-blue-800

{"backgroundColor":"#1e40af"}

bg-blue-900

{"backgroundColor":"#1e3a8a"}

bg-lightBlue-50

{"backgroundColor":"#f0f9ff"}

bg-lightBlue-100

{"backgroundColor":"#e0f2fe"}

bg-lightBlue-200

{"backgroundColor":"#bae6fd"}

bg-lightBlue-300

{"backgroundColor":"#7dd3fc"}

bg-lightBlue-400

{"backgroundColor":"#38bdf8"}

bg-lightBlue-500

{"backgroundColor":"#0ea5e9"}

bg-lightBlue-600

{"backgroundColor":"#0284c7"}

bg-lightBlue-700

{"backgroundColor":"#0369a1"}

bg-lightBlue-800

{"backgroundColor":"#075985"}

bg-lightBlue-900

{"backgroundColor":"#0c4a6e"}

bg-sky-50

{"backgroundColor":"#f0f9ff"}

bg-sky-100

{"backgroundColor":"#e0f2fe"}

bg-sky-200

{"backgroundColor":"#bae6fd"}

bg-sky-300

{"backgroundColor":"#7dd3fc"}

bg-sky-400

{"backgroundColor":"#38bdf8"}

bg-sky-500

{"backgroundColor":"#0ea5e9"}

bg-sky-600

{"backgroundColor":"#0284c7"}

bg-sky-700

{"backgroundColor":"#0369a1"}

bg-sky-800

{"backgroundColor":"#075985"}

bg-sky-900

{"backgroundColor":"#0c4a6e"}

bg-cyan-50

{"backgroundColor":"#ecfeff"}

bg-cyan-100

{"backgroundColor":"#cffafe"}

bg-cyan-200

{"backgroundColor":"#a5f3fc"}

bg-cyan-300

{"backgroundColor":"#67e8f9"}

bg-cyan-400

{"backgroundColor":"#22d3ee"}

bg-cyan-500

{"backgroundColor":"#06b6d4"}

bg-cyan-600

{"backgroundColor":"#0891b2"}

bg-cyan-700

{"backgroundColor":"#0e7490"}

bg-cyan-800

{"backgroundColor":"#155e75"}

bg-cyan-900

{"backgroundColor":"#164e63"}

bg-teal-50

{"backgroundColor":"#f0fdfa"}

bg-teal-100

{"backgroundColor":"#ccfbf1"}

bg-teal-200

{"backgroundColor":"#99f6e4"}

bg-teal-300

{"backgroundColor":"#5eead4"}

bg-teal-400

{"backgroundColor":"#2dd4bf"}

bg-teal-500

{"backgroundColor":"#14b8a6"}

bg-teal-600

{"backgroundColor":"#0d9488"}

bg-teal-700

{"backgroundColor":"#0f766e"}

bg-teal-800

{"backgroundColor":"#115e59"}

bg-teal-900

{"backgroundColor":"#134e4a"}

bg-emerald-50

{"backgroundColor":"#ecfdf5"}

bg-emerald-100

{"backgroundColor":"#d1fae5"}

bg-emerald-200

{"backgroundColor":"#a7f3d0"}

bg-emerald-300

{"backgroundColor":"#6ee7b7"}

bg-emerald-400

{"backgroundColor":"#34d399"}

bg-emerald-500

{"backgroundColor":"#10b981"}

bg-emerald-600

{"backgroundColor":"#059669"}

bg-emerald-700

{"backgroundColor":"#047857"}

bg-emerald-800

{"backgroundColor":"#065f46"}

bg-emerald-900

{"backgroundColor":"#064e3b"}

bg-green-50

{"backgroundColor":"#f0fdf4"}

bg-green-100

{"backgroundColor":"#dcfce7"}

bg-green-200

{"backgroundColor":"#bbf7d0"}

bg-green-300

{"backgroundColor":"#86efac"}

bg-green-400

{"backgroundColor":"#4ade80"}

bg-green-500

{"backgroundColor":"#22c55e"}

bg-green-600

{"backgroundColor":"#16a34a"}

bg-green-700

{"backgroundColor":"#15803d"}

bg-green-800

{"backgroundColor":"#166534"}

bg-green-900

{"backgroundColor":"#14532d"}

bg-lime-50

{"backgroundColor":"#f7fee7"}

bg-lime-100

{"backgroundColor":"#ecfccb"}

bg-lime-200

{"backgroundColor":"#d9f99d"}

bg-lime-300

{"backgroundColor":"#bef264"}

bg-lime-400

{"backgroundColor":"#a3e635"}

bg-lime-500

{"backgroundColor":"#84cc16"}

bg-lime-600

{"backgroundColor":"#65a30d"}

bg-lime-700

{"backgroundColor":"#4d7c0f"}

bg-lime-800

{"backgroundColor":"#3f6212"}

bg-lime-900

{"backgroundColor":"#365314"}

bg-yellow-50

{"backgroundColor":"#fefce8"}

bg-yellow-100

{"backgroundColor":"#fef9c3"}

bg-yellow-200

{"backgroundColor":"#fef08a"}

bg-yellow-300

{"backgroundColor":"#fde047"}

bg-yellow-400

{"backgroundColor":"#facc15"}

bg-yellow-500

{"backgroundColor":"#eab308"}

bg-yellow-600

{"backgroundColor":"#ca8a04"}

bg-yellow-700

{"backgroundColor":"#a16207"}

bg-yellow-800

{"backgroundColor":"#854d0e"}

bg-yellow-900

{"backgroundColor":"#713f12"}

bg-amber-50

{"backgroundColor":"#fffbeb"}

bg-amber-100

{"backgroundColor":"#fef3c7"}

bg-amber-200

{"backgroundColor":"#fde68a"}

bg-amber-300

{"backgroundColor":"#fcd34d"}

bg-amber-400

{"backgroundColor":"#fbbf24"}

bg-amber-500

{"backgroundColor":"#f59e0b"}

bg-amber-600

{"backgroundColor":"#d97706"}

bg-amber-700

{"backgroundColor":"#b45309"}

bg-amber-800

{"backgroundColor":"#92400e"}

bg-amber-900

{"backgroundColor":"#78350f"}

bg-orange-50

{"backgroundColor":"#fff7ed"}

bg-orange-100

{"backgroundColor":"#ffedd5"}

bg-orange-200

{"backgroundColor":"#fed7aa"}

bg-orange-300

{"backgroundColor":"#fdba74"}

bg-orange-400

{"backgroundColor":"#fb923c"}

bg-orange-500

{"backgroundColor":"#f97316"}

bg-orange-600

{"backgroundColor":"#ea580c"}

bg-orange-700

{"backgroundColor":"#c2410c"}

bg-orange-800

{"backgroundColor":"#9a3412"}

bg-orange-900

{"backgroundColor":"#7c2d12"}

bg-red-50

{"backgroundColor":"#fef2f2"}

bg-red-100

{"backgroundColor":"#fee2e2"}

bg-red-200

{"backgroundColor":"#fecaca"}

bg-red-300

{"backgroundColor":"#fca5a5"}

bg-red-400

{"backgroundColor":"#f87171"}

bg-red-500

{"backgroundColor":"#ef4444"}

bg-red-600

{"backgroundColor":"#dc2626"}

bg-red-700

{"backgroundColor":"#b91c1c"}

bg-red-800

{"backgroundColor":"#991b1b"}

bg-red-900

{"backgroundColor":"#7f1d1d"}

bg-warmGray-50

{"backgroundColor":"#fafaf9"}

bg-warmGray-100

{"backgroundColor":"#f5f5f4"}

bg-warmGray-200

{"backgroundColor":"#e7e5e4"}

bg-warmGray-300

{"backgroundColor":"#d6d3d1"}

bg-warmGray-400

{"backgroundColor":"#a8a29e"}

bg-warmGray-500

{"backgroundColor":"#78716c"}

bg-warmGray-600

{"backgroundColor":"#57534e"}

bg-warmGray-700

{"backgroundColor":"#44403c"}

bg-warmGray-800

{"backgroundColor":"#292524"}

bg-warmGray-900

{"backgroundColor":"#1c1917"}

bg-trueGray-50

{"backgroundColor":"#fafafa"}

bg-trueGray-100

{"backgroundColor":"#f5f5f5"}

bg-trueGray-200

{"backgroundColor":"#e5e5e5"}

bg-trueGray-300

{"backgroundColor":"#d4d4d4"}

bg-trueGray-400

{"backgroundColor":"#a3a3a3"}

bg-trueGray-500

{"backgroundColor":"#737373"}

bg-trueGray-600

{"backgroundColor":"#525252"}

bg-trueGray-700

{"backgroundColor":"#404040"}

bg-trueGray-800

{"backgroundColor":"#262626"}

bg-trueGray-900

{"backgroundColor":"#171717"}

bg-gray-50

{"backgroundColor":"#fafafa"}

bg-gray-100

{"backgroundColor":"#f4f4f5"}

bg-gray-200

{"backgroundColor":"#e4e4e7"}

bg-gray-300

{"backgroundColor":"#d4d4d8"}

bg-gray-400

{"backgroundColor":"#a1a1aa"}

bg-gray-500

{"backgroundColor":"#71717a"}

bg-gray-600

{"backgroundColor":"#52525b"}

bg-gray-700

{"backgroundColor":"#3f3f46"}

bg-gray-800

{"backgroundColor":"#27272a"}

bg-gray-900

{"backgroundColor":"#18181b"}

bg-coolGray-50

{"backgroundColor":"#f9fafb"}

bg-coolGray-100

{"backgroundColor":"#f3f4f6"}

bg-coolGray-200

{"backgroundColor":"#e5e7eb"}

bg-coolGray-300

{"backgroundColor":"#d1d5db"}

bg-coolGray-400

{"backgroundColor":"#9ca3af"}

bg-coolGray-500

{"backgroundColor":"#6b7280"}

bg-coolGray-600

{"backgroundColor":"#4b5563"}

bg-coolGray-700

{"backgroundColor":"#374151"}

bg-coolGray-800

{"backgroundColor":"#1f2937"}

bg-coolGray-900

{"backgroundColor":"#111827"}

bg-blueGray-50

{"backgroundColor":"#f8fafc"}

bg-blueGray-100

{"backgroundColor":"#f1f5f9"}

bg-blueGray-200

{"backgroundColor":"#e2e8f0"}

bg-blueGray-300

{"backgroundColor":"#cbd5e1"}

bg-blueGray-400

{"backgroundColor":"#94a3b8"}

bg-blueGray-500

{"backgroundColor":"#64748b"}

bg-blueGray-600

{"backgroundColor":"#475569"}

bg-blueGray-700

{"backgroundColor":"#334155"}

bg-blueGray-800

{"backgroundColor":"#1e293b"}

bg-blueGray-900

{"backgroundColor":"#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 background 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: "#f3f3f3", // Light shade        dark: "#212121", // 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 background color case as:

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