有条件地使用自定义顺风屏幕尺寸的类

Question

我有一个小问题。我的顺风配置中有自定义顺风屏幕尺寸，我想根据屏幕尺寸有条件地使用类。顺风可以吗？类=“徽标平板电脑：徽标文本桌面：徽标文本”

似乎不起作用，徽标文本不会覆盖更大屏幕的徽标

Answer 1

要有条件地使用自定义 Tailwind 屏幕尺寸的类，您确实可以配置 Tailwind CSS 以识别自定义断点并有条件地应用样式。以下是实现这一目标的方法：

定义自定义屏幕尺寸：首先，您需要在 tailwind.config.js 文件中定义自定义屏幕尺寸。

在类中使用自定义断点：然后，您可以在 HTML 类中使用这些自定义断点。

这是分步指南：

第1步：配置自定义断点 编辑 tailwind.config.js 文件以包含您的自定义屏幕尺寸。例如：

module.exports = {
  theme: {
    extend: {
      screens: {
        'tablet': '640px',
        'desktop': '1024px',
      },
    },
  },
  variants: {},
  plugins: [],
}

第 2 步：在类中应用自定义断点 然后，您可以在类属性中使用这些自定义屏幕尺寸。例如：

<div class="logo tablet:logo-text desktop:logo-text">
  <!-- Your content -->
</div>

在这个例子中：

默认情况下将应用

徽标。 当屏幕尺寸为 640px 或更宽时，tablet:logo-text 将应用 logo-text 类。 当屏幕尺寸为 1024px 或更宽时，desktop:logo-text 将应用 logo-text 类。 常见陷阱 确保与其他类不发生冲突，并且正确处理特殊性。课程的顺序和特殊性很重要。

示例解决方案 以下是如何构建 HTML 以确保有条件地应用类：

<div class="logo tablet:logo-text desktop:logo-text">
  <!-- Your content -->
</div>

这将确保：

logo 类默认应用在所有屏幕上。 在 640 像素及以上的屏幕上，由于自定义平板电脑断点，徽标文本类将覆盖徽标类。 在 1024px 及以上的屏幕上，由于自定义桌面断点，徽标文本类也将被应用或覆盖徽标类。 如果您仍然面临类未被覆盖的问题，您可能需要验证以下内容：

确保不存在可能发生冲突的更高特异性选择器。 如果使用可能具有更高优先级的其他实用程序类，请检查所应用类的顺序。 额外提示 如有必要，请谨慎使用 !important 来强制类覆盖，但通常最好依靠正确的顺序和特异性。 考虑使用简单的类名进行测试，以确保您的配置在将其应用于复杂场景之前能够正常工作。 通过执行这些步骤，您应该能够有条件地使用基于 Tailwind CSS 中的自定义屏幕尺寸的类。