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.