Tailwind - 如何将"image-rendering： -webkit-optimize-contrast"添加到tailwind.config.js

Question

我想有一个有效的方法来重用image-rendering: -webkit-optimize-contrast在不同的组件在我的Vue应用程序。我不想创建它作为一个<style scoped>和声明它在每个组件。

我能找到的关于它的唯一资源是来自顺风文档:链接。我尝试下载autoprefixer，并按要求插入插件:

module.exports = {
plugins: [
require('tailwindcss'),
require('autoprefixer'),
]
}

我不知道如何在我的顺风配置中包含webkit。我试着把它添加到我的主题中，但我做不到。我不确定我的方法是否正确:

theme: {
extend: {
webkit: {
'image-rendering': '-webkit-optimize-contrast'
}
}
}

我如何包括image-rendering: -webkit-optimize-contrast在我的tailwind.config.js和使用它作为一个类?

Answer 1

解决方案:

在顺风文档(添加自定义样式)中找到解决方案。

在CSS文件中添加自定义CSS样式(例如tailwind.css)。顺风文档建议将您的自定义样式包装在@layer <layer-name> { /* css here */ }中，其中<layer-name>可以是base,components等。

谢谢@tao指出来。

tailwind.css:

@tailwind base;
@tailwind components;
@tailwind utilities;
@layer components {
.disable-blur{
image-rendering: -webkit-optimize-contrast;
}
}

不需要安装autoprefixer.