TailwindCSS linear gradients

A plugin that allows to use degrees with linear gradients

Installation

Install the plugin from npm

npm install tailwindcss-linear-gradient

Add plugin to your tailwind.config.js

// tailwind.config.js
module.exports = {
  plugins: [
    require('tailwindcss-linear-gradient'),
  ],
}

Use it as bg-linear-gradient-{degrees} utility to specify linear gradient angle

<div class="h-40 from-red-500 to-blue-500 bg-linear-gradient-50">
  50 deg from default config
</div>

List of available defaults are:

Each will generate CSS like background-image: background: linear-gradient( 90deg, var(--tw-gradient-from) degree, var(--tw-gradient-to) degree

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      bgLinearGradientDeg: {
        75: '75 deg',
      }
    }
  },
}