Background

Convey meaning through background-color

Background colors

To apply a background color, just append bg-* to the color class like this: bg-primary

bg-primary
bg-secondary
bg-dark
bg-light
bg-success
bg-info
bg-warning
bg-error
<div class="bg-primary">bg-primary</div>
<div class="bg-secondary">bg-secondary</div>
<div class="bg-dark">bg-dark</div>
<div class="bg-light">bg-light</div>
<div class="bg-success">bg-success</div>
<div class="bg-info">bg-info</div>
<div class="bg-warning">bg-warning</div>
<div class="bg-error">bg-error</div>

Opacity

Choose from any of the .bg-opacity utilities to change the background opacity

This is 75% opacity success background
This is 50% opacity success background
This is 25% opacity success background
This is 10% opacity success background
This is default success background
<div class="bg-success  bg-opacity-75">This is 75% opacity success background</div>
<div class="bg-success bg-opacity-50">This is 50% opacity success background</div>
<div class="bg-success bg-opacity-25">This is 25% opacity success background</div>
<div class="bg-success bg-opacity-10">This is 10% opacity success background</div>
<div class="bg-success">This is default success background</div>
Note there are still other opacity classes like bg-opacity-5,bg-opacity-15,bg-opacity-20 and so on...

Other Background colors

bg-red-100
bg-red-200
bg-red-300
bg-red-400
bg-red-500

bg-pink-100
bg-pink-200
bg-pink-300
bg-pink-400
bg-pink-500

bg-orange-100
bg-orange-200
bg-orange-300
bg-orange-400
bg-orange-500

bg-yellow-100
bg-yellow-200
bg-yellow-300
bg-yellow-400
bg-yellow-500

bg-purple-100
bg-purple-200
bg-purple-300
bg-purple-400
bg-purple-500

bg-indigo-100
bg-indigo-200
bg-indigo-200
bg-indigo-400
bg-indigo-500

bg-green-100
bg-green-200
bg-green-300
bg-green-400
bg-green-500

bg-blue-100
bg-blue-200
bg-blue-300
bg-blue-400
bg-blue-500

bg-light-blue-100
bg-light-blue-200
bg-light-blue-300
bg-light-blue-400
bg-light-blue-500

bg-brown-100
bg-brown-200
bg-brown-300
bg-brown-400
bg-brown-500

bg-gray-100
bg-gray-200
bg-gray-300
bg-gray-400
bg-gray-500
bg-gray-600
bg-gray-700
bg-gray-800
On this page