Accent Color not work in 3.4.1 Version

[ashkankiani]

What version of Tailwind CSS are you using?
3.4.1

What build tool (or framework if it abstracts the build tool) are you using?
"devDependencies": {
"@tailwindcss/forms": "^0.5.7",
"@tailwindcss/typography": "^0.5.10",
"autoprefixer": "^10.4.17",
"eslint": "^8",
"eslint-config-next": "14.1.0",
"eslint-config-prettier": "^9.1.0",
"postcss": "^8.4.35",
"tailwindcss": "^3.4.1"
}

What version of Node.js are you using?
V20.8.0

What browser are you using?

All Browser Chrome, Mozila and Edge

What operating system are you using?

Windows 11

Reproduction URL
localhost

Describe your issue

use Tailwind in nextjs and use code:

Customized


Customized

but not working, Other Tailwind versions are correct.

[ashkankiani]

code is :
<label> <input type="checkbox" className="accent-red-500" checked /> Customized </label> <label> <input type="checkbox" className="accent-pink-500" checked /> Customized </label>

[Vaibhavkulshrestha12]

code is : <label> <input type="checkbox" className="accent-red-500" checked /> Customized </label> <label> <input type="checkbox" className="accent-pink-500" checked /> Customized </label>

have you tried to install the accent color plugin

plugins: [
require('tailwind-accent-color')(),
]

try this using the yarn installation of accent color module

[ashkankiani]

There is no mention of the following library in the link below
https://tailwindcss.com/docs/accent-color
But again, I did this, but unfortunately it is not added.

[thecrypticace]

@ashkankiani Can you provide a reproduction?

Accent color is working correctly for me: https://play.tailwindcss.com/r5Ylcab884

on macOS:

on Windows (Edge and Chrome both work):

I will note that if you have a high contrast theme applied in Windows like Aquatic, Desert, Dusk, or Night Sky those will override the accent-color CSS property and it no longer functions but that is an intentional browser / OS behavior.

[Jonath-z]

@ashkankiani are you using any UI library?

[ashkankiani]

No, I don't use it and my problem was not solved in NEXTJS. There is no problem in simple mode.

[xt0rted]

I just ran into this issue and found that when you're using @tailwindcss/forms the checked state is replaced with an svg that's hard coded to white. The accent color can be set using the text color classes like text-red-500.

Here's a modified example from #12937 (comment)

https://play.tailwindcss.com/YikF8AkOS3

[ashkankiani]

thank you. solved for me.
add class text-yellow-400 focus:ring-yellow-400
But this is not the standard method. You should use the Accent Color method of tailwinds, which interferes with the form