# Tailwind CSS Error /sourcePath:12:8

**URL:** <https://forum.pinegrow.com/t/tailwind-css-error-sourcepath8/9992>\
**Category:** Beginners\
**Created:** [November 5, 2024, 2:30am UTC](https://forum.pinegrow.com/t/tailwind-css-error-sourcepath8/9992 "2024-11-05T02:30:08Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![TLCBoudoir](https://avatars.discourse-cdn.com/v4/letter/t/c37758/32.png) [@TLCBoudoir](https://forum.pinegrow.com/u/TLCBoudoir)\
**Post date:** [November 5, 2024, 2:30am UTC](https://forum.pinegrow.com/t/tailwind-css-error-sourcepath8/9992/1 "2024-11-05T02:30:08Z")

</div>

I’m trying to teach myself Pinegrow Tailwind after about a decade away from site design. I’m making progress, but slowly, as I design my site.

Yesterday I started getting the following error, which had not shown up before in the weeks I’ve been working on this:

"Tailwind CSS error  
Tailwind CSS compilation failed due to error:

Error: /sourcePath:12:8: The `bg-dark` class does not exist. If `bg-dark` is a custom class, make sure it is defined within a `@layer` directive.

Tailwind CSS code:

@import url(‘[https://fonts.googleapis.com/css?family=Inter:100,200,300,400,500,600,700,800,900|Oxanium:200,300,400,500,600,700,800&display=swap](https://fonts.googleapis.com/css?family=Inter:100,200,300,400,500,600,700,800,900%7COxanium:200,300,400,500,600,700,800&display=swap)’);

@tailwind base;  
@tailwind components;  
@tailwind utilities;

h1,h2,h3,h4,h5,h6 {  
@apply font-serif;  
}  
body { @apply bg-dark; }  
body, html {  
min-height: 100vh;  
}  
"  
I thought I had defined “dark” as a dark green color, and it is still showing well on the site, but I can’t figure out how to resolve this error.

Any ideas? Thanks. And sorry if this (my first post) is maybe in the wrong area or something.

---

<div class="post-metadata">

**Author:** ![Anam](https://avatars.discourse-cdn.com/v4/letter/a/47e85d/32.png) [@Anam](https://forum.pinegrow.com/u/Anam)\
**Post date:** [November 5, 2024, 6:14am UTC](https://forum.pinegrow.com/t/tailwind-css-error-sourcepath8/9992/2 "2024-11-05T06:14:23Z")

</div>

It looks like Tailwind is flagging `bg-dark` because it can’t find a class named `bg-dark` in its configuration, which can happen if it wasn’t added properly.

Here’s a solution that should resolve the issue:

1. **Check your `tailwind.config.js` file** :

- Ensure that the `bg-dark` color is defined under the `extend` section.
- Example:

js

Copy code

```auto
module.exports = {
  theme: {
    extend: {
      colors: {
        dark: '#YOUR_DARK_GREEN_COLOR_CODE', // Replace with your color code
      },
    },
  },
}

```

1. **Use a Custom Layer (if needed)**:

- If you defined `bg-dark` in a custom layer in your CSS, double-check it’s wrapped in `@layer` and that Tailwind knows where to look for it.

1. **Rebuild Tailwind** :

- Sometimes the error persists due to cache issues. Run a build command, like `npx tailwindcss build`, or restart Pinegrow if necessary.

This should resolve the `bg-dark` issue!

---

<div class="post-metadata">

**Author:** ![TLCBoudoir](https://avatars.discourse-cdn.com/v4/letter/t/c37758/32.png) [@TLCBoudoir](https://forum.pinegrow.com/u/TLCBoudoir)\
**Post date:** [December 2, 2024, 5:08am UTC](https://forum.pinegrow.com/t/tailwind-css-error-sourcepath8/9992/3 "2024-12-02T05:08:59Z")

</div>

Thank you. That was a great answer and I appreciate your willingness to educate a re-newbie.