Plugin

tailwindcss-accent

Add accent colors for dynamic, flexible color use in your Tailwind CSS project.

GitHub IconGitHubnpm Iconnpm

A Tailwind CSS plugin that provides accent color utilities using CSS custom properties based on the Tailwind CSS default color palette.

This plugin has been tested with Tailwind CSS v2 and v3.

Installation

Install the plugin from npm:

npm install -D tailwindcss-accent

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

module.exports = {
  theme: {
    // ...
  },
  plugins: [
    require('tailwindcss-accent')({
      colors: ['violet', 'blue'],
      root: 'blue',
      cssVarsPrefix: 'tw-plugin', // result: --tw-plugin-accent-200
    }),
    // ...
  ],
};
Selected: 6-10
JavaScript
UTF-8

Plugin Options

OptionDescription
colors (REQUIRED)Include specific color(s). View the available colors section.
rootSet color from colors option as :root accent color.
cssVarsPrefixSet prefix for css variables name. default to 'tw-ta' (e.g: --tw-ta-accent-200)
Note

The cssVarsPrefix option can help prevent naming conflicts and make it easier for you to use accent CSS variables in your styles.

Available Colors

Check the default color palettes for the Tailwind CSS v2 and the Tailwind CSS v3.

Basic Usage

Add the data-accent attribute to your root/html element (or simply set the root plugin option).

<html data-accent="blue">
  <!-- ... -->
</html>

Now, instead of writing text-blue-600, with this plugin you can write text-accent-600.

The accent color will follow the value of the nearest parent element's data-accent attribute, or the element itself.

Let the code speak:

<!-- default to :root -->
<p class="text-accent-600">this text has a blue (:root) accent color.</p>

<div data-accent="violet">
  <!-- based on nearest parent element: violet. -->
  <p class="text-accent-600">this text has a violet accent color.</p>

  <!-- based on nearest parent element: violet. -->
  <p class="text-accent-600">
    this text has a violet

    <!-- overrides the parent's accent color to blue. -->
    <span data-accent="blue" class="text-accent-600">and blue</span>

    accent color!
  </p>
</div>

Try it out on Tailwind Play

Examples

Real-world Example

This website uses this plugin. By default, all pages use the violet accent color, except for pages under the work/ path, which have a blue accent color.

You can see the difference in the table of contents, header caption, text selection, links, etc.

See the configuration file and implementation code for details.

Live Example

Want to see something cool? Click this button and watch the accent color on this page change.

You should already know that the button doesn't change the color classes of all components. This single line of code—

document.documentElement.setAttribute('data-accent', newAccent);

—does the magic by simply changing the html data-accent attribute value to the new accent color, and components that use the -accent-* color will follow the changes.

Changing your website's accent color has never been this easy 🔥

License

tailwindcss-accent is licensed under the MIT License.