cssgradienttailwind-csslinear-gradientstailwind-3

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


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)


Solution

  • 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 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

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