https://github.com/ilsyaa/tw-accent-colors

Dynamic accent color TailwindCSS
https://github.com/ilsyaa/tw-accent-colors

accent-colors plugin plugins tailwindcss tailwindcss-plugin theme

Last synced: about 1 month ago
JSON representation

Dynamic accent color TailwindCSS

• Host: GitHub
• URL: https://github.com/ilsyaa/tw-accent-colors
• Owner: ilsyaa
• License: mit
• Created: 2024-03-04T06:46:04.000Z (10 months ago)
• Default Branch: master
• Last Pushed: 2024-03-11T20:33:58.000Z (10 months ago)
• Last Synced: 2024-05-14T11:35:36.065Z (7 months ago)
• Topics: accent-colors, plugin, plugins, tailwindcss, tailwindcss-plugin, theme
• Language: HTML
• Homepage: https://ilsyaa.github.io/tw-accent-colors/
• Size: 43.9 KB
• Stars: 1
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# tailwindcss-accent

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

##### Example : https://ilsyaa.github.io/tw-accent-colors

## Installation

Install the plugin from npm:

```bash

npm i -D tw-accent

```

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

```js

module.exports = {

  plugins: [

    require('tw-accent')({

      colors: ['violet', 'sky', 'red'],

      root: 'red',

      cssVarsPrefix: 'tw', // result: --tw-accent-500

      attr: 'lazy-accent', // result: ...

    }),

  ],

};

```

## Options

| 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: `...`)                                                  |

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

## Basic Usage

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

```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:

```html

this text has a blue (:root) accent color.




  

  
this text has a violet accent color.


  

  


    this text has a violet

    

    and sky

    accent color!

  



```


## License

MIT