# How to Change the Background Color of a Specific Div in Tailwind CSS

> Easily change div background color in Tailwind CSS with utility classes like bg-blue-500. Learn how to modify specific element backgrounds without custom CSS for faster styling.

- Repository: [Tailwind Labs/tailwindcss](https://github.com/tailwindlabs/tailwindcss)
- Tags: how-to-guide
- Published: 2026-02-16

---

**Apply the `bg-{color}` utility class directly to your div element, such as `bg-blue-500` or `bg-red-600`, to change its background color without writing custom CSS.**

Tailwind CSS provides a comprehensive utility-first approach to styling HTML elements directly in your markup. If you need to change the background color of a specific div element, Tailwind generates optimized utility classes from its theme configuration located in the `tailwindlabs/tailwindcss` repository. This guide explains how Tailwind CSS creates these background color utilities and how to apply them to individual div elements using the framework's core architecture.

## How Tailwind CSS Generates Background Color Utilities

### Theme Configuration and Color Resolution

Tailwind derives its color palette from the `theme.backgroundColor` section, which references the central color definitions in [`packages/tailwindcss/src/theme.ts`](https://github.com/tailwindlabs/tailwindcss/blob/main/packages/tailwindcss/src/theme.ts). When you use a class like `bg-blue-500`, Tailwind resolves this to the corresponding hex or RGB value defined in the theme configuration.

### Utility Registration in src/utilities.ts

The framework registers background color utilities as static utilities in [`packages/tailwindcss/src/utilities.ts`](https://github.com/tailwindlabs/tailwindcss/blob/main/packages/tailwindcss/src/utilities.ts). For each color in the theme, Tailwind generates a class mapping using the `staticUtility` helper:

```typescript
// packages/tailwindcss/src/utilities.ts
staticUtility('bg-red-500', [['background-color', theme('colors.red.500')]])

```

This process creates the CSS rule `.bg-red-500 { background-color: #ef4444; }` in the final output.

## Applying Background Colors to Specific Div Elements

### Basic Background Color Implementation

To change the background color of a specific div, add the `bg-{color}` utility class directly to the HTML element:

```html
<div class="bg-green-400 p-4">
  This div has a green background.
</div>

```

Tailwind generates the corresponding CSS:

```css
.bg-green-400 {
  background-color: #34d399;
}

```

### Interactive States with Variants

Tailwind's variant system, implemented in [`packages/tailwindcss/src/variants.ts`](https://github.com/tailwindlabs/tailwindcss/blob/main/packages/tailwindcss/src/variants.ts), automatically enables state-based background colors. Use the `hover:`, `focus:`, or `active:` prefixes to change colors on interaction:

```html
<div class="bg-blue-200 hover:bg-blue-600 p-4 transition-colors">
  Hover over me to see the color change!
</div>

```

The generated CSS includes both the base and hover states:

```css
.bg-blue-200 {
  background-color: #bfdbfe;
}
.hover\:bg-blue-600:hover {
  background-color: #2563eb;
}

```

## Customizing Background Colors Beyond Defaults

### Extending the Theme Configuration

When the default palette doesn't meet your needs, extend [`tailwind.config.js`](https://github.com/tailwindlabs/tailwindcss/blob/main/tailwind.config.js) to add custom colors. Tailwind merges your extensions with the base theme during the build process:

```javascript
// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        brand: {
          100: '#f0e5ff',
          500: '#7c3aed',
        },
      },
    },
  },
}

```

Use your custom color in HTML:

```html
<div class="bg-brand-500 text-white p-4">
  Custom brand background color.
</div>

```

### Arbitrary Values for One-Off Colors

For single-use colors without modifying the config, use Tailwind's arbitrary value syntax with square brackets:

```html
<div class="bg-[#123456] p-4">
  Arbitrary hex color background.
</div>

```

This generates exact CSS without adding the color to your theme:

```css
.bg-\[\#123456\] {
  background-color: #123456;
}

```

## Summary

- **Utility Classes**: Use `bg-{color}` classes (like `bg-red-500` or `bg-blue-700`) to apply background colors directly to div elements without custom CSS.
- **Source Architecture**: Tailwind generates these utilities in [`packages/tailwindcss/src/utilities.ts`](https://github.com/tailwindlabs/tailwindcss/blob/main/packages/tailwindcss/src/utilities.ts) based on color definitions in [`packages/tailwindcss/src/theme.ts`](https://github.com/tailwindlabs/tailwindcss/blob/main/packages/tailwindcss/src/theme.ts), with variants handled by [`packages/tailwindcss/src/variants.ts`](https://github.com/tailwindlabs/tailwindcss/blob/main/packages/tailwindcss/src/variants.ts).
- **Interactive States**: Apply hover, focus, and other states using prefixes like `hover:bg-blue-600`, automatically generated by the variant system.
- **Customization**: Extend [`tailwind.config.js`](https://github.com/tailwindlabs/tailwindcss/blob/main/tailwind.config.js) for reusable custom palettes, or use arbitrary values like `bg-[#123456]` for one-off colors.

## Frequently Asked Questions

### How do I change the background color of just one div in Tailwind?

Add the specific `bg-{color}` utility class to that div's class attribute. For example, `<div class="bg-purple-500">` applies a purple background only to that specific element, leaving others unaffected. Tailwind's utility-first approach means you style elements individually through their class attributes rather than writing custom CSS selectors.

### Can I use custom hex colors without editing the config file?

Yes, use Tailwind's arbitrary value syntax by wrapping the hex code in square brackets: `bg-[#1a2b3c]`. This generates the exact CSS rule you need without requiring changes to [`tailwind.config.js`](https://github.com/tailwindlabs/tailwindcss/blob/main/tailwind.config.js). Arbitrary values work with any CSS property that accepts a color value, including `text-[color]` and `border-[color]`.

### Where does Tailwind store the default color definitions?

Default colors are defined in [`packages/tailwindcss/src/theme.ts`](https://github.com/tailwindlabs/tailwindcss/blob/main/packages/tailwindcss/src/theme.ts), which exports the complete color palette used to generate utility classes. When you reference `bg-blue-500`, Tailwind looks up the `blue.500` value in this theme file. The [`packages/tailwindcss/src/utilities.ts`](https://github.com/tailwindlabs/tailwindcss/blob/main/packages/tailwindcss/src/utilities.ts) file then registers these as static utilities during the build process, creating the mapping between class names and CSS property values.

### How do hover background colors work in Tailwind?

Hover states use the variant prefix system implemented in [`packages/tailwindcss/src/variants.ts`](https://github.com/tailwindlabs/tailwindcss/blob/main/packages/tailwindcss/src/variants.ts). When you write `hover:bg-red-600`, Tailwind generates a CSS rule with the `:hover` pseudo-class: `.hover\:bg-red-600:hover { background-color: #dc2626; }`. This happens automatically for all color utilities without requiring manual CSS writing, and works alongside other variants like `focus:`, `active:`, and `disabled:`.