accent-color

Ejemplos

Estableciendo el color de acento

Usa utilidades como accent-rose-500 y accent-lime-600 para cambiar el color de acento de un elemento:

<label>
  <input type="checkbox" checked />
  Predeterminado del navegador
</label>
<label>
  <input class="accent-pink-500" type="checkbox" checked />
  Personalizado
</label>

Esto es útil para estilizar elementos como checkboxes y grupos de radio sobrescribiendo el color predeterminado del navegador.

Cambiando la opacidad

Usa el modificador de opacidad de color para controlar la opacidad del color de acento de un elemento:

<input class="accent-purple-500/25" type="checkbox" checked />
<input class="accent-purple-500/75" type="checkbox" checked />

Establecer la opacidad del color de acento tiene soporte limitado en navegadores y actualmente solo funciona en Firefox.

Usando un valor personalizado

Usa la sintaxis accent-[<value>] para establecer el accent color basado en un valor completamente personalizado:

<input class="accent-[#50d71e] ..." type="checkbox" />

Para variables CSS, también puedes usar la sintaxis accent-(<custom-property>) :

<input class="accent-(--my-accent-color) ..." type="checkbox" />

Esto es solo un atajo para accent-[var(<custom-property>)] que agrega la función var() por ti automáticamente.

Aplicando en hover

Prefija una utilidad accent-color con una variante como hover:* para aplicar la utilidad solo en ese estado:

<input class="accent-black hover:accent-pink-500" type="checkbox" />

Aprende más sobre el uso de variantes en la documentación de variantes.

Responsive design

Prefija una utilidad accent-color con una variante de breakpoint como md: para aplicar la utilidad solo en tamaños de pantalla medium y superiores:

<input class="accent-black md:accent-pink-500 ..." type="checkbox" />

Aprende más sobre el uso de variantes en la documentación de variantes.

Personalizando tu tema

Usa las variables de tema --color-* para personalizar las utilidades color en tu proyecto:

@theme {
  --color-regal-blue: #243c5a; 
}

Ahora la utilidad accent-regal-blue puede ser usada en tu marcado:

<input class="accent-regal-blue" type="checkbox" />

Aprende más sobre la personalización de tu tema en la documentación del tema.