仅目标移动断点

Question

我正在使用 Tailwind v3。

我在 javascript:

的内联样式中应用了自定义背景颜色

<div style="background-color: RANDOM_GENERATED_COLOR" />

但是在移动断点中，我希望它忽略这种背景颜色，我不想要背景。所以我所做的是添加 !bg-transparent，使用“！”修饰符我让它覆盖内联样式：

<div style="background-color: RANDOM_GENERATED_COLOR" class="!bg-transparent" />

但是我不希望内联样式在所有其他断点 sm 及以上被覆盖。

是否可以将 !bg-transparent 定位到仅限移动设备的断点？

Answer 1

您可以添加自定义 variant，它将仅像 @media max-width: 640px 一样在移动设备屏幕上应用样式。一般来说，对于自定义变体，您可以添加任何额外的媒体或您需要的状态

const plugin = require('tailwindcss/plugin')

module.exports = {
  plugins: [
    plugin(function ({ addVariant }) {
      addVariant('mobile-only', "@media screen and (max-width: theme('screens.sm'))"); // instead of hard-coded 640px use sm breakpoint value from config. Or anything
    }),
  ],
}

<div style="background-color: RANDOM_GENERATED_COLOR" class="mobile-only:!bg-transparent" />

由于内联样式

，仍然需要使用!important标志

彩色DEMO - 调整右侧演示屏幕的大小

更新： Noitidart 建议使用 CSS 变量的另一种方法 - 这更干净，在 !important

中不需要

module.exports = {
  theme: {
    extend: {
      colors: {
        shading: 'var(--shading)'
      }
    }
  },
}

<div style="--shading: RANDOM_GENERATED_COLOR;" class="bg-shading sm:bg-transparent">
</div>

DEMO

仅目标移动断点

Target mobile only breakpoint

tailwind-css