有没有办法调整Tailwind CSS中线性渐变的角度？

Question

有没有办法使用 Tailwind CSS 调整 HTML 组件背景图像样式的线性渐变角度？

我唯一能做的就是在方向选项之间进行选择：t(top)、tr(top-right)等，但我想将具有 Tailwind 类的 hr 元素的渐变角度设置为 24 度.bg-gradient-[160deg]（以及颜色：.from-lime .to-red）

Answer 1

当然，您可以为此任务编写一个简单的插件

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',
                  }
              )
          }
       )
    })
  ],
}

并像这样使用它

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',
                  }
              )
          }
       )
    })
  ],
}

演示版

如果有帮助的话，我刚刚为此创建了 Tailwind v3 的简单包

Answer 2

这在 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>