tailwindcss/docs/source/docs/background-color.blade.md

extends	title
_layouts.documentation	Backgrounds

Background Color

Utilities for controlling an element's background color.

@include('_partials.feature-badges', [ 'responsive' => true, 'customizable' => true, 'hover' => true, 'focus' => false ])

@include('_partials.work-in-progress')

@foreach ($page->config['colors'] as $name => $value) @endforeach

Class	Properties	Description
.bg-{{ $name }}	color: {{ $value }};	Set the background color of an element to {{ implode(' ', array_reverse(explode('-', $name))) }}.

Hover

In addition to the standard responsive variations, background colors also come in hover: variations that apply the given background color on hover.

@component('_partials.code-sample')

Hover over this element

@endcomponent

Hover utilities can also be combined with responsive utilities by adding the responsive {screen}: prefix before the hover: prefix.

<button class="... md:bg-orange md:hover:bg-red ...">Button</button>