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

Usage

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:

• bg-linear-gradient-10
• bg-linear-gradient-20
• bg-linear-gradient-30
• bg-linear-gradient-40
• bg-linear-gradient-50
• bg-linear-gradient-60
• bg-linear-gradient-70
• bg-linear-gradient-80
• bg-linear-gradient-90

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

Configuration

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