Tailwind CSS Error /sourcePath:12:8

Beginners
1

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’);

@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.

2

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

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!