Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/lukewarlow/tailwind-accent-color

Tailwind v2 plugin to create classes for the accent-color CSS property. Shipped in Chrome 93, Firefox 92 and Safari 15.4.
https://github.com/lukewarlow/tailwind-accent-color

accent-color tailwind tailwind-css tailwindcss tailwindcss-plugin

Last synced: about 2 months ago
JSON representation

Tailwind v2 plugin to create classes for the accent-color CSS property. Shipped in Chrome 93, Firefox 92 and Safari 15.4.

Awesome Lists containing this project

README

        

# TailwindCSS Accent Color Plugin

[![npm](https://img.shields.io/npm/v/tailwind-accent-color.svg?style=flat-square)](https://www.npmjs.com/package/tailwind-accent-color)

This plugin generates [accent-color](https://developer.mozilla.org/en-US/docs/Web/CSS/accent-color) classes.

Note: As of TailwindCSS v3 these utilities are [included](https://tailwindcss.com/docs/accent-color) by default.

## Installation

Add to your project via:

```bash
# 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.

```js
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.

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

## License

This project is licensed under the [MIT License](https://github.com/lukewarlow/tailwind-accent-color/blob/master/LICENSE).