顺风 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;
}

有什么好的方法来导出回退属性与顺风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'],
}
})