---
id: 684cd027744c2a0520ba4d58
title: Step 4
challengeType: 0
dashedName: step-4
---

# --description--

Tailwind CSS uses utility classes which are applied directly to the markup.  These classes include styling for fonts, colors, Flexbox layouts, Grid and more. 

To apply a background color in Tailwind CSS, you can use the `bg` prefix, followed by the color name and a number. The number represents the color's shade.

Here is an example of applying a dark blue background color to a paragraph element.

```html
<p class="bg-blue-900">This has a dark blue background.</p>
```

In your opening `div` tag, add a class with the utility class `bg-red-100` which represents a light red background color.

# --hints--

Your opening `div` tag should have a class attribute.

```js
const divEl = document.querySelector("div");
assert.isTrue(divEl.hasAttribute("class"));
```

Your class attribute should have the utility class `bg-red-100`.

```js
const divEl = document.querySelector("div");
assert.exists(document.querySelector("div.bg-red-100"));
```

# --seed--

## --seed-contents--

```html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Error Message Component</title>
    <script src="https://cdn.tailwindcss.com"></script>
  </head>
  <body>
    --fcc-editable-region--
    <div>
    --fcc-editable-region--
      <p>
        <strong>Error!</strong> Something went wrong. Please try again.
      </p>
      <button aria-label="Dismiss">
        <span aria-hidden>&times;</span>
      </button>
    </div>
  </body>
</html>
```
