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.

• Host: GitHub
• URL: https://github.com/lukewarlow/tailwind-accent-color
• Owner: lukewarlow
• License: mit
• Archived: true
• Created: 2021-04-18T15:59:35.000Z (over 3 years ago)
• Default Branch: master
• Last Pushed: 2021-12-10T15:55:21.000Z (almost 3 years ago)
• Last Synced: 2024-09-23T14:03:42.207Z (about 2 months ago)
• Topics: accent-color, tailwind, tailwind-css, tailwindcss, tailwindcss-plugin
• Language: JavaScript
• Homepage: https://play.tailwindcss.com/Fn0JyxIC0o
• Size: 10.7 KB
• Stars: 0
• Watchers: 2
• Forks: 0
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

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