Tailwind CSS 回退用于新的屏幕长度类型，例如“lvh”、“svh”

Question

我编写tailwind.config.js如下以使用新的 css 长度类型，例如“lvh”、“svh”。

module.exports = {
  theme: {
    extend: {
      height: {
        "screen": "100dvh",
        "screen-small": "100svh",
        "screen-large": "100lvh"
      }
    }
  }
}

然后就成功导出了

.h-screen {
    height: 100dvh;
}

但我想获得后备属性，例如

.h-screen {
  height: 100vh; /* fallback for Opera, IE and etc. */
  height: 100dvh;
}

有没有什么好方法可以使用 Tailwind CSS 导出后备属性？

我不知道要尝试

Answer 1

将数组作为属性传递

module.exports = {
  theme: {
    extend: {
      height: {
        screen: ['100vh /* fallback for Opera, IE and etc. */', '100dvh'],
      }
    }
  }
}

这将生成

.h-screen {
  height: 100vh /* fallback for Opera, IE and etc. */;
  height: 100dvh;
}

演示版

注意：我不能 100% 确定这是应该的方法，因为编辑器显示错误，因为我们传递的不是字符串而是字符串数组。

另一种方法是使用层创建实用程序

@layer utilities {
  .h-my-screen {
    height: 100vh; /* fallback for Opera, IE and etc. */
    height: 100dvh;
  }
}

如果您希望使用保留h-screen名称，方法类似，但它将按照您需要的正确顺序堆叠默认值（100vh）和新值（100dvh） - 但这只是巧合

@layer utilities {
  .h-screen {
    height: 100dvh;
  }
}

使用Tailwind 插件同样的事情

const plugin = require('tailwindcss/plugin')

/** @type {import('tailwindcss').Config} */
module.exports = {
  // ...

  plugins: [
    plugin(function ({ addBase, addComponents, addUtilities, theme }) {
      addUtilities({
        '.h-screen': {
          height: '100dvh',
        }
      })
    })
  ],
}

创建双向实用程序h-screen现在将生成

.h-screen {
  height: 100vh;
  height: 100dvh;
}

注意：使用 JS 语法时，对象不能包含类似的键（height在您的情况下），但它可以接受按定义顺序排列的值数组

// Wrong
addUtilities({
  '.h-my-screen': {
    height: '100vh /* fallback for Opera, IE and etc. */',
    height: '100dvh',
  }
})

// Correct
addUtilities({
  '.h-my-screen': {
    height: ['100vh /* fallback for Opera, IE and etc. */', '100dvh'],
  }
})