Background Color

Class	Properties
t.bgTransparent	backgroundColor: 'transparent'
t.bgBlack	backgroundColor: '#000'
t.bgWhite	backgroundColor: '#fff'
t.bgGray100	backgroundColor: '#f7fafc'
t.bgGray200	backgroundColor: '#edf2f7'
t.bgGray300	backgroundColor: '#e2e8f0'
t.bgGray400	backgroundColor: '#cbd5e0'
t.bgGray500	backgroundColor: '#a0aec0'
t.bgGray600	backgroundColor: '#718096'
t.bgGray700	backgroundColor: '#4a5568'
t.bgGray800	backgroundColor: '#2d3748'
t.bgGray900	backgroundColor: '#1a202c'
t.bgRed100	backgroundColor: '#fff5f5'
t.bgRed200	backgroundColor: '#fed7d7'
t.bgRed300	backgroundColor: '#feb2b2'
t.bgRed400	backgroundColor: '#fc8181'
t.bgRed500	backgroundColor: '#f56565'
t.bgRed600	backgroundColor: '#e53e3e'
t.bgRed700	backgroundColor: '#c53030'
t.bgRed800	backgroundColor: '#9b2c2c'
t.bgRed900	backgroundColor: '#742a2a'
t.bgOrange100	backgroundColor: '#fffaf0'
t.bgOrange200	backgroundColor: '#feebc8'
t.bgOrange300	backgroundColor: '#fbd38d'
t.bgOrange400	backgroundColor: '#f6ad55'
t.bgOrange500	backgroundColor: '#ed8936'
t.bgOrange600	backgroundColor: '#dd6b20'
t.bgOrange700	backgroundColor: '#c05621'
t.bgOrange800	backgroundColor: '#9c4221'
t.bgOrange900	backgroundColor: '#7b341e'
t.bgYellow100	backgroundColor: '#fffff0'
t.bgYellow200	backgroundColor: '#fefcbf'
t.bgYellow300	backgroundColor: '#faf089'
t.bgYellow400	backgroundColor: '#f6e05e'
t.bgYellow500	backgroundColor: '#ecc94b'
t.bgYellow600	backgroundColor: '#d69e2e'
t.bgYellow700	backgroundColor: '#b7791f'
t.bgYellow800	backgroundColor: '#975a16'
t.bgYellow900	backgroundColor: '#744210'
t.bgGreen100	backgroundColor: '#f0fff4'
t.bgGreen200	backgroundColor: '#c6f6d5'
t.bgGreen300	backgroundColor: '#9ae6b4'
t.bgGreen400	backgroundColor: '#68d391'
t.bgGreen500	backgroundColor: '#48bb78'
t.bgGreen600	backgroundColor: '#38a169'
t.bgGreen700	backgroundColor: '#2f855a'
t.bgGreen800	backgroundColor: '#276749'
t.bgGreen900	backgroundColor: '#22543d'
t.bgTeal100	backgroundColor: '#e6fffa'
t.bgTeal200	backgroundColor: '#b2f5ea'
t.bgTeal300	backgroundColor: '#81e6d9'
t.bgTeal400	backgroundColor: '#4fd1c5'
t.bgTeal500	backgroundColor: '#38b2ac'
t.bgTeal600	backgroundColor: '#319795'
t.bgTeal700	backgroundColor: '#2c7a7b'
t.bgTeal800	backgroundColor: '#285e61'
t.bgTeal900	backgroundColor: '#234e52'
t.bgBlue100	backgroundColor: '#ebf8ff'
t.bgBlue200	backgroundColor: '#bee3f8'
t.bgBlue300	backgroundColor: '#90cdf4'
t.bgBlue400	backgroundColor: '#63b3ed'
t.bgBlue500	backgroundColor: '#4299e1'
t.bgBlue600	backgroundColor: '#3182ce'
t.bgBlue700	backgroundColor: '#2b6cb0'
t.bgBlue800	backgroundColor: '#2c5282'
t.bgBlue900	backgroundColor: '#2a4365'
t.bgIndigo100	backgroundColor: '#ebf4ff'
t.bgIndigo200	backgroundColor: '#c3dafe'
t.bgIndigo300	backgroundColor: '#a3bffa'
t.bgIndigo400	backgroundColor: '#7f9cf5'
t.bgIndigo500	backgroundColor: '#667eea'
t.bgIndigo600	backgroundColor: '#5a67d8'
t.bgIndigo700	backgroundColor: '#4c51bf'
t.bgIndigo800	backgroundColor: '#434190'
t.bgIndigo900	backgroundColor: '#3c366b'
t.bgPurple100	backgroundColor: '#faf5ff'
t.bgPurple200	backgroundColor: '#e9d8fd'
t.bgPurple300	backgroundColor: '#d6bcfa'
t.bgPurple400	backgroundColor: '#b794f4'
t.bgPurple500	backgroundColor: '#9f7aea'
t.bgPurple600	backgroundColor: '#805ad5'
t.bgPurple700	backgroundColor: '#6b46c1'
t.bgPurple800	backgroundColor: '#553c9a'
t.bgPurple900	backgroundColor: '#44337a'
t.bgPink100	backgroundColor: '#fff5f7'
t.bgPink200	backgroundColor: '#fed7e2'
t.bgPink300	backgroundColor: '#fbb6ce'
t.bgPink400	backgroundColor: '#f687b3'
t.bgPink500	backgroundColor: '#ed64a6'
t.bgPink600	backgroundColor: '#d53f8c'
t.bgPink700	backgroundColor: '#b83280'
t.bgPink800	backgroundColor: '#97266d'
t.bgPink900	backgroundColor: '#702459'

Usage

Control the background color of an element using the t.bg{Color} utilities.