Add accent-color utilities
#5387
Conversation
|
As this only has support in 2/3 browser engines, I understand this may not be merged soon. Here's the accent-color utilities in plugin form: https://github.com/lukewarlow/tailwind-accent-color |
|
The test is failing locally but the css output doesn't make much sense to me, seeing as this is basically a direct copy of the caret color plugin.
|
src/plugins/accentColor.js
Outdated
| return function ({ matchUtilities, theme, variants }) { | ||
| matchUtilities( | ||
| { | ||
| caret: (value) => { |
There was a problem hiding this comment.
This right here is why the tests are failing, you are telling Tailwind to match classes starting with the word "caret" when it should be "accent" 👍🏻
There was a problem hiding this comment.
🤦 That'd certainly do it. Fixed now.
stubs/defaultConfig.stub.js
Outdated
| @@ -172,6 +172,7 @@ module.exports = { | |||
| none: 'none', | |||
| }, | |||
| caretColor: (theme) => theme('colors'), | |||
| accentColor: (theme) => theme('colors'), | |||
There was a problem hiding this comment.
Should probably include auto as a value here in addition to all of the colors:
https://developer.mozilla.org/en-US/docs/Web/CSS/accent-color#values
|
Thanks @lukewarlow! |
This PR adds utilities for the
accent-colorproperty.Example usage:
<input type="checkbox" class="accent-red-500">