tailwindcss-gradient-text

Simplifies the creation of gradient text using Tailwind CSS.

Yes, this is already possible using multiple classes, but this plugin simplifies it into one class.

Installation

npm install tailwindcss-gradient-text

Inside your tailwind.config.js file, require the plugin inside the plugins option

module.exports = {
  plugins: [require('tailwindcss-gradient-text')]
};

Usage

You can apply a gradient to some text by using the utility class text-gradient-to-{direction}.

<h1 class="text-gradient-to-r from-blue-500 via-green-300 to-red-500 font-extrabold text-3xl"></h1>

Radial Gradients

You can use radial (circular) gradients using the utility class text-gradient-radial.

<h1 class="text-gradient-radial from-blue-500 to-red-500 font-extrabold text-3xl"></h1>

Custom Colors

This plugin uses Tailwind's gradient color stops, which include all default colors and colors defined in your tailwind.config.js file.

Example:

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        myColor: '#5cb6f7',
        myOtherColor: '#c4ff8a'
      }
    }
  }
};

In this case, to create gradient text using your custom colors, you would use:

<h1 class="text-gradient-to-{direction} from-myColor to-myOtherColor">Text</h1>

More information on custom colors here.

Tips

• Using a middle (third) color
• Modifying Tailwind's gradient color stops