To apply a background color, just append bg-* to the color class like this: bg-primary
bg-primarybg-secondarybg-darkbg-lightbg-successbg-infobg-warningbg-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>
Choose from any of the .bg-opacity utilities to change the background opacity
<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>
bg-opacity-5,bg-opacity-15,bg-opacity-20 and so on...
bg-red-100bg-red-200bg-red-300bg-red-400bg-red-500bg-pink-100bg-pink-200bg-pink-300bg-pink-400bg-pink-500bg-orange-100bg-orange-200bg-orange-300bg-orange-400bg-orange-500bg-yellow-100bg-yellow-200bg-yellow-300bg-yellow-400bg-yellow-500bg-purple-100bg-purple-200bg-purple-300bg-purple-400bg-purple-500bg-green-100bg-green-200bg-green-300bg-green-400bg-green-500bg-blue-100bg-blue-200bg-blue-300bg-blue-400bg-blue-500bg-gray-100bg-gray-200bg-gray-300bg-gray-400bg-gray-500bg-gray-600bg-gray-700bg-gray-800Background Color copied!
Designed and built with ♥ by Rume Aluya.