Background

Background Color

The class for background-color follow this format: bg-[color]-[shade], you can checkout Color reference for available color value and it's shades

Class	Style
bg-transparent	backgroundColor: transparent
bg-black	backgroundColor: #000
bg-white	backgroundColor: #fff
bg-gray-100	backgroundColor: #f7fafc
bg-gray-200	backgroundColor: #edf2f7
bg-gray-300	backgroundColor: #e2e8f0
bg-gray-400	backgroundColor: #cbd5e0
bg-gray-500	backgroundColor: #a0aec0
bg-gray-600	backgroundColor: #718096
bg-gray-700	backgroundColor: #4a5568
bg-gray-800	backgroundColor: #2d3748
bg-gray-900	backgroundColor: #1a202c
bg-red-100	backgroundColor: #fff5f5
bg-red-200	backgroundColor: #fed7d7
bg-red-300	backgroundColor: #feb2b2
bg-red-400	backgroundColor: #fc8181
bg-red-500	backgroundColor: #f56565
bg-red-600	backgroundColor: #e53e3e
bg-red-700	backgroundColor: #c53030
bg-red-800	backgroundColor: #9b2c2c
bg-red-900	backgroundColor: #742a2a
bg-orange-100	backgroundColor: #fffaf0
bg-orange-200	backgroundColor: #feebc8
bg-orange-300	backgroundColor: #fbd38d
bg-orange-400	backgroundColor: #f6ad55
bg-orange-500	backgroundColor: #ed8936
bg-orange-600	backgroundColor: #dd6b20
bg-orange-700	backgroundColor: #c05621
bg-orange-800	backgroundColor: #9c4221
bg-orange-900	backgroundColor: #7b341e
bg-yellow-100	backgroundColor: #fffff0
bg-yellow-200	backgroundColor: #fefcbf
bg-yellow-300	backgroundColor: #faf089
bg-yellow-400	backgroundColor: #f6e05e
bg-yellow-500	backgroundColor: #ecc94b
bg-yellow-600	backgroundColor: #d69e2e
bg-yellow-700	backgroundColor: #b7791f
bg-yellow-800	backgroundColor: #975a16
bg-yellow-900	backgroundColor: #744210
bg-green-100	backgroundColor: #f0fff4
bg-green-200	backgroundColor: #c6f6d5
bg-green-300	backgroundColor: #9ae6b4
bg-green-400	backgroundColor: #68d391
bg-green-500	backgroundColor: #48bb78
bg-green-600	backgroundColor: #38a169
bg-green-700	backgroundColor: #2f855a
bg-green-800	backgroundColor: #276749
bg-green-900	backgroundColor: #22543d
bg-teal-100	backgroundColor: #e6fffa
bg-teal-200	backgroundColor: #b2f5ea
bg-teal-300	backgroundColor: #81e6d9
bg-teal-400	backgroundColor: #4fd1c5
bg-teal-500	backgroundColor: #38b2ac
bg-teal-600	backgroundColor: #319795
bg-teal-700	backgroundColor: #2c7a7b
bg-teal-800	backgroundColor: #285e61
bg-teal-900	backgroundColor: #234e52
bg-blue-100	backgroundColor: #ebf8ff
bg-blue-200	backgroundColor: #bee3f8
bg-blue-300	backgroundColor: #90cdf4
bg-blue-400	backgroundColor: #63b3ed
bg-blue-500	backgroundColor: #4299e1
bg-blue-600	backgroundColor: #3182ce
bg-blue-700	backgroundColor: #2b6cb0
bg-blue-800	backgroundColor: #2c5282
bg-blue-900	backgroundColor: #2a4365
bg-indigo-100	backgroundColor: #ebf4ff
bg-indigo-200	backgroundColor: #c3dafe
bg-indigo-300	backgroundColor: #a3bffa
bg-indigo-400	backgroundColor: #7f9cf5
bg-indigo-500	backgroundColor: #667eea
bg-indigo-600	backgroundColor: #5a67d8
bg-indigo-700	backgroundColor: #4c51bf
bg-indigo-800	backgroundColor: #434190
bg-indigo-900	backgroundColor: #3c366b
bg-purple-100	backgroundColor: #faf5ff
bg-purple-200	backgroundColor: #e9d8fd
bg-purple-300	backgroundColor: #d6bcfa
bg-purple-400	backgroundColor: #b794f4
bg-purple-500	backgroundColor: #9f7aea
bg-purple-600	backgroundColor: #805ad5
bg-purple-700	backgroundColor: #6b46c1
bg-purple-800	backgroundColor: #553c9a
bg-purple-900	backgroundColor: #44337a
bg-pink-100	backgroundColor: #fff5f7
bg-pink-200	backgroundColor: #fed7e2
bg-pink-300	backgroundColor: #fbb6ce
bg-pink-400	backgroundColor: #f687b3
bg-pink-500	backgroundColor: #ed64a6
bg-pink-600	backgroundColor: #d53f8c
bg-pink-700	backgroundColor: #b83280
bg-pink-800	backgroundColor: #97266d
bg-pink-900	backgroundColor: #702459