A Tailwind CSS plugin that provides accent color utilities using CSS custom properties based on the Tailwind CSS default color palette.
Install the plugin from npm:
npm i -D tw-accentThen add the plugin to your tailwind.config.js file:
module.exports = {
plugins: [
require('tw-accent')({
colors: ['violet', 'sky', 'red'],
root: 'red',
cssVarsPrefix: 'tw', // result: --tw-accent-500
attr: 'lazy-accent', // result: <html lazy-accent="red">...</html>
}),
],
};| Option | Description |
|---|---|
colors REQUIRED |
Include specific colors. View the available colors section. |
| root | Set color from colors option as :root accent color. |
| cssVarsPrefix | Set prefix for css variables name. default to 'tw-ta' (e.g: --tw-ta-accent-200) |
| attr | Set attribute name. default to 'lazy-accent' (e.g: <html lazy-accent="red">...</html>) |
The cssVarsPrefix option can help prevent naming conflicts and make it easier for you to use accent CSS variables in your styles.
Add the lazy-accent attribute to your root/html element (or simply set the root plugin option).
<html lazy-accent="red">
<!-- -->
</html>Now, instead of writing text-red-500, with this plugin you can write text-accent-500.
The accent color will follow the value of the nearest parent element's lazy-accent attribute, or the element itself.
Let the code speak:
<!-- default to :root -->
<p class="text-accent-500">this text has a blue (:root) accent color.</p>
<div lazy-accent="violet">
<!-- based on nearest parent element: violet. -->
<p class="text-accent-500">this text has a violet accent color.</p>
<!-- based on nearest parent element: violet. -->
<p class="text-accent-500">
this text has a violet
<!-- overrides the parent's accent color to blue. -->
<span lazy-accent="sky" class="text-accent-500">and sky</span>
accent color!
</p>
</div>MIT