-
Notifications
You must be signed in to change notification settings - Fork 4.2k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
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 |
src/plugins/accentColor.js
Outdated
return function ({ matchUtilities, theme, variants }) { | ||
matchUtilities( | ||
{ | ||
caret: (value) => { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
🤦 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.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Added
Thanks @lukewarlow! |
This PR adds utilities for the
accent-color
property.Example usage:
<input type="checkbox" class="accent-red-500">