如何使用自定义类在 TailwindCSS 中为不同设备显示不同的图像？

【问题标题】：How to use custom class to show different images for different devices in TailwindCSS?如何使用自定义类在 TailwindCSS 中为不同设备显示不同的图像？
【发布时间】：2021-07-19 00:31:22
【问题描述】：

在 Laravel 8 / tailwindcss 2 应用程序中，我想在课堂上显示不同的图像作为背景：

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

定义了自定义类：

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

但这不起作用，并且无论如何都不显示背景图像。

哪种方式有效？

【问题讨论】：

标签： tailwind-css

【解决方案1】：

您可以扩展backgroundImage utility 以在您的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')",
            })
        }
    }
}

然后，在适当的断点处使用生成的bg-* 类。

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

【讨论】：

谢谢！有用！您能否解释一下 bg-test-device-md 如何作为定义的 test-device-md 主题的背景图像？命名规则？
您在backgroundImage 下添加的图像将作为bg- 前缀类提供。直接阅读background image docs。