<!--
Arbitrary values
If you need to use a one-off background-image value that doesn’t make sense to include in your theme, use square brackets to generate a property on the fly using any arbitrary value.
-->
<div class="bg-[url('/img/hero-pattern.svg')]">
<!-- Your Code -->
</div>########### Responsive Grids ###############
<div class="flex flex-wrap">
<div class="w-full sm:w-1/2 md:w-1/3 lg:w-1/4 xl:w-1/6 mb-4 bg-gray-500"></div>
<div class="w-full sm:w-1/2 md:w-1/3 lg:w-1/4 xl:w-1/6 mb-4 bg-gray-400"></div>
<div class="w-full sm:w-1/2 md:w-1/3 lg:w-1/4 xl:w-1/6 mb-4 bg-gray-500"></div>
<div class="w-full sm:w-1/2 md:w-1/3 lg:w-1/4 xl:w-1/6 mb-4 bg-gray-400"></div>
<div class="w-full sm:w-1/2 md:w-1/3 lg:w-1/2 xl:w-1/6 mb-4 bg-gray-500"></div>
<div class="w-full sm:w-1/2 md:w-1/3 lg:w-1/2 xl:w-1/6 mb-4 bg-gray-400"></div>
</div> // tailwind.config.js
module.exports = {
theme: {
extend: {
backgroundImage: theme => ({
+ 'hero-pattern': "url('/img/hero-pattern.svg')",
+ 'footer-texture': "url('/img/footer-texture.png')",
})
}
}
}<div className="bg-[url('../public/assets/images/banner.svg')]">