有没有办法在 Tailwind CSS 中调整 *线性渐变* 的**角度**?
Is there a way to adjust the **angle** of the *linear gradient* in Tailwind CSS?
有没有办法在HTML组件的背景图像样式上调整线性渐变的角度使用 Tailwind CSS?
我唯一能做的就是在方向选项之间进行选择:'t(top)'、'tr(top-right)'、etc 但我想将带有 Tailwind 的 hr 元素的渐变角度设置为 24 度class 喜欢“.bg-gradient-[160deg]”(以及颜色:“.from-lime” “.to -红色")
.repeating-linear {
background: repeating-linear-gradient(-45deg, red, red 5px, blue 5px, blue 10px);
}
通过给 class 中的角度和 repeating-linear-gradient 来试试这个。
当然,您可以为此任务编写一个简单的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
有没有办法在HTML组件的背景图像样式上调整线性渐变的角度使用 Tailwind CSS? 我唯一能做的就是在方向选项之间进行选择:'t(top)'、'tr(top-right)'、etc 但我想将带有 Tailwind 的 hr 元素的渐变角度设置为 24 度class 喜欢“.bg-gradient-[160deg]”(以及颜色:“.from-lime” “.to -红色")
.repeating-linear {
background: repeating-linear-gradient(-45deg, red, red 5px, blue 5px, blue 10px);
}
通过给 class 中的角度和 repeating-linear-gradient 来试试这个。
当然,您可以为此任务编写一个简单的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