tailwind-css - 仅针对移动设备的断点

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