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

extends	title	description	features
_layouts.documentation	Background Color	Utilities for controlling an element's background color.	responsive customizable hover focus true true true false

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

@include('_partials.class-table', [ 'rows' => $page->config['colors']->map(function ($value, $name) { $class = ".bg-{$name}"; $code = "background-color: {$value};"; $color = implode(' ', array_reverse(explode('-', $name))); $description = "Set the background color of an element to {$color}."; return [ $class, $code, $description, ]; })->values()->all() ])

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>