Is there a way to adjust the **angle** of the *linear gradient* in Tailwind CSS?-CodePudding

Is there a way to adjust the angle of the linear gradient on a background image style of an HTML component using Tailwind CSS? The only thing I can do is choose between the directional options :'t(top)', 'tr(top-right)', etc but I want to set the angle of the gradient to 24 degree for an hr element with a Tailwind class like ".bg-gradient-[160deg]" (and the colors: ".from-lime" ".to-red")

CodePudding user response：

Sure, you may write a simple plugin for this task

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

and use it like

<div >
  90 deg from defaults
</div> 

<div >
  10 deg on mobile,
  60 on desktops
</div> 

<div >
  137 deg from JIT on mobile,
  to bottom right on desktop
</div> 

<div >
  75 deg from user's custom config
</div>

DEMO

If it will help, I just created simple package for Tailwind v3 for this

CodePudding user response：

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

try this by giving the angle in the class with repeating-linear-gradient.