Package Exports

tailwindcss-accent
tailwindcss-accent/src/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (tailwindcss-accent) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

tailwindcss-accent

Add dynamic accent color to your Tailwind CSS project.

This plugin creates a dynamic accent color using CSS custom properties based on the Tailwind CSS default color palette.

Using this plugin will add an accent color classes to your Tailwind CSS project, for example: bg-accent-500, dark:outline-accent-200, etc.

Works with Tailwind CSS v2 and v3.

Installation

Install the plugin from npm:

$ npm install tailwindcss-accent

Then add the plugin to your tailwind.config.js file:

// tailwind.config.js
module.exports = {
  plugins: [
    require('tailwindcss-accent')({
      colors: ['violet', 'blue'], // (OPTIONAL) Only include specific color(s).
      root: 'blue', // (OPTIONAL) Set selected color as :root accent color.
    }),
  ],
};

NOTES:

Make sure to only include the colors you use to make the CSS output file size smaller.
If the colors option is specified, the root color MUST be the one that comes in the colors option.

Available Accent Colors

Possible values are:

slate, gray, zinc, neutral, stone, red, orange, amber, yellow, lime, green, emerald, teal, cyan, sky, blue, indigo, violet, purple, fuchsia, pink, and rose.

Check the Tailwind CSS default color palette for more detailed and updated information.

Usage

Add data-accent attribute to parent element, for example: html element.

<html data-accent="violet"></html>

Let's use the accent color class on our component.

<div class="text-accent-400">Hello, World!</div>

Note that based on the closest parent data-accent value, the current component will have a violet-400 text color.

Then, somewhere on the button's click event:

// change the data-accent html attribute value to blue
document.documentElement.setAttribute('data-accent', 'blue');

The component will automatically change the text color from violet-400 to blue-400.

Check the real-world example for a more practical implementation.

Real-world Example

Check this out on my personal site repository (enji.dev).

License

tailwindcss-accent is licensed under the MIT License.

Credits

Created with create-tailwind-plugin.