Tailwind CSS Accent Color: Easily Add Accent Colors to Your Elements

TailwindCSS Accent Color Plugin

This plugin generates accent-color classes.

Note: As of TailwindCSS v3 these utilities are included by default.

Installation

Add to your project via:

# Install using npm
npm install -D tailwind-accent-color

# Install using yarn
yarn add -D tailwind-accent-color

Add it to the plugins array of your Tailwind config.

plugins: [
  require('tailwind-accent-color')(), // no options to configure
]

An accent-{color} class will be created for each Tailwind color, much like bg- classes.

Optionally, you can also customise the variants for the plugin, by adding to the variants section of your Tailwind config.

variants: {
    accentColor: ['responsive', 'dark', 'group-hover', 'focus-within', 'hover', 'focus'] // Listed are the defaults
}