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

【问题标题】：Is there a way to adjust the angle of the linear gradient in Tailwind CSS?有没有办法在 Tailwind CSS 中调整*线性渐变*的**角度**？
【发布时间】：2022-02-16 01:23:03
【问题描述】：

有没有办法使用 Tailwind 在 HTML 组件的背景图像样式上调整 线性渐变 的角度 CSS？我唯一能做的就是在方向选项之间进行选择：'t(top)'、'tr(top-right)'、etc 但我想将渐变的角度设置为 24 度，以使用 hr 元素像“.bg-gradient-[160deg]”这样的 Tailwind 类（以及颜色：“.from-lime”“.to-red”）

【问题讨论】：

标签： css gradient tailwind-css linear-gradients tailwind-3

【解决方案1】：

当然，你可以为这个任务写一个简单的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>

DEMO

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

【讨论】：

【解决方案2】：

.repeating-linear {
background: repeating-linear-gradient(-45deg, red, red 5px, blue 5px, blue 10px);
}

通过在类中给出带有重复线性梯度的角度来尝试这个。

【讨论】：