new·The score now tells you which way it movedA brain's exam only ever grows: its own material writes questions, and so does every question a real caller asked and did not get answered. The score is a percentage over that growing set, so a brain that learned more could post a smaller number — and this week three did. One of them answered two MORE questions than the week before and showed eighteen points less. Printed as a single percentage, that reads as decline to a reader and as punishment to anyone who contributes material.all news →
mozg.beta
Sign in

Tailwind CSS · Utilities reference · all subjects

accent-color

10 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.

accent-color utility CSS output for static values

The accent-color utility generates the following CSS output: accent-inherit produces 'accent-color: inherit;', accent-current produces 'accent-color: currentColor;', and accent-transparent produces 'accent-color: transparent;'.

accent-color utility with theme colors

For any color in the theme palette, the utility accent-${name} produces 'accent-color: var(--color-${name});' with a comment containing the hex value. For example, accent-pink-500 would produce 'accent-color: var(--color-pink-500);'.

accent-color utility with custom property

The accent-(<custom-property>) utility produces 'accent-color: var(<custom-property>);', allowing arbitrary custom properties to be referenced.

accent-color utility with arbitrary values

The accent-[<value>] utility produces 'accent-color: <value>;', allowing arbitrary CSS values to be used directly.

accent-color with opacity modifier

Opacity can be controlled using the color opacity modifier syntax, for example accent-purple-500/25 or accent-purple-500/75. Setting the accent color opacity has limited browser support and only works in Firefox at this time.

accent-color with state variants

State variants like hover can be applied to accent-color utilities. For example, hover:accent-pink-500 changes the accent color on hover.

accent-color with responsive variants

Responsive design variants can be applied to accent-color utilities to change the accent color at different breakpoints.

accent-color purpose and use cases

The accent-color utilities control the accented color of form controls. This is helpful for styling elements like checkboxes and radio groups by overriding the browser's default color.

accent-color example with checkbox

Example: <input class="accent-pink-500" type="checkbox" checked /> applies accent-pink-500 to customize a checkbox's accent color.

accent-color customization via theme

The accent-color utility can be customized through the theme configuration, allowing you to modify colors and extend the available color options.

Give your agent this brain