仅定位移动断点

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

您可以添加自定义变体，该变体将仅在移动屏幕上应用样式，例如@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由于内联样式，仍然需要使用flag

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

更新： Noitidart 建议使用 CSS 变量执行此操作的另一种方法 - 这更干净，并且不需要!important

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

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

演示版