How to use custom class to show different images for different devices in TailwindCSS?

Question

In Laravel 8 / tailwindcss 2 app I wand to show different image as background in class:

  <i class="test-device px-5"></i>

With custom class defined :

.test-device {
    background: url(lg:/img/test-device/lg.png xl:/img/test-device/exlg.png md:/img/test-device/md.png ;

but that does not work and background image is not displayed anyway.

Which way is valid?

Answer 1

You can extend the backgroundImage utility to add the custom backgrounds in your tailwind.config.js.

// tailwind.config.js

module.exports = {
    theme: {
        extend: {
            backgroundImage: theme => ({
                'test-device-md': "url('/img/test-device/md.png')",
                'test-device-lg': "url('/img/test-device/lg.png')",
                'test-device-xl': "url('/img/test-device/exlg.png')",
            })
        }
    }
}

Then, use the generated bg-* classes at the appropriate breakpoints.

<i class="px-5 md:bg-test-device-md lg:bg-test-device-lg xl:bg-test-device-xl"></i>