有没有办法使用 Tailwind CSS 调整 HTML 组件背景图像样式的线性渐变角度?
我唯一能做的就是在方向选项之间进行选择:
t(top)
, tr(top-right)
, 但我想将渐变的角度设置为 24 度,用于具有 Tailwind 类的 hr 元素,如 .bg-gradient-[160deg]
(和颜色:.from-lime
.to-red
)
当然,您可以为此任务编写一个简单的plugin
const plugin = require('tailwindcss/plugin')
module.exports = {
theme: {
extend: {
// custom user configuration
bgGradientDeg: {
75: '75deg',
}
}
},
plugins: [
plugin(function({ matchUtilities, theme }) {
matchUtilities(
{
'bg-gradient': (angle) => ({
'background-image': `linear-gradient(${angle}, var(--tw-gradient-stops))`,
}),
},
{
// values from config and defaults you wish to use most
values: Object.assign(
theme('bgGradientDeg', {}), // name of config key. Must be unique
{
10: '10deg', // bg-gradient-10
15: '15deg',
20: '20deg',
25: '25deg',
30: '30deg',
45: '45deg',
60: '60deg',
90: '90deg',
120: '120deg',
135: '135deg',
}
)
}
)
})
],
}
并像
一样使用它<div class="h-40 from-red-500 via-yellow-500 to-blue-500 bg-gradient-90">
90 deg from defaults
</div>
<div class="h-40 from-red-500 via-yellow-500 to-blue-500 bg-gradient-10 sm:bg-gradient-60">
10 deg on mobile,
60 on desktops
</div>
<div class="h-40 from-red-500 via-yellow-500 to-blue-500 bg-gradient-[137deg] sm:bg-gradient-to-br">
137 deg from JIT on mobile,
to bottom right on desktop
</div>
<div class="h-40 from-red-500 via-yellow-500 to-blue-500 bg-gradient-75">
75 deg from user's custom config
</div>
如果有帮助,我刚刚为 Tailwind v3 创建了简单的package为此
你不需要插件来实现你想要的。你可以做这样的事情,其中
theme("colors.gray.600")
只是顺风配置中的值:
theme: {
backgroundImage: (theme) => ({
"image-gradient-90deg": [
"90deg",
theme("colors.gray.600"),
theme("colors.gray.500"),
],
}),
}
这在 Tailwind 3.2.7 中对我有用:
module.exports = {
theme: {
extend: {
backgroundImage: {
'gradient-24': 'linear-gradient(24deg, var(--tw-gradient-stops))'
},
},
},
}
<div class="bg-gradient-24 from-lime-500 to-red-500">Content of div</div>
试试这个
// inside your "tailwinnd-preset.js" file
module.exports = {
theme: {
extend: {
// ... others
backgroundImage: ({
theme
}) => ({
'image-gradient-315deg': 'linear-gradient(315deg, var(--tw-gradient-stops))',
}),
// ... others
}
}
}
或者你可以
backgroundImage: ({
theme
}) => ({
'gradient-blue-1': 'var(--gradient-blue-1)', // defined at :root by css variable
}),
:root {
--gradient-blue-1: linear-gradient(315deg, #1250dc 0%, #306de4 100%);
}
下面是使用方法
<div className="bg-image-gradient-315deg from-violet-500 to-fuchsia-500">
</div>