2

Tailwind CSS is not generating classes for the background.

When I tried to create a simple class like bg-black, it didn't add it to the output.css file. However, when I would temporarily put something like a grid or flex in there, it would add the class to the output. Is it syntax, the config file, or something else entirely? Let me know if you need more code, and thanks in advance!

CONFIG (tailwind.config.js):

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./index.html"],
  theme: {
    colors: {
      transparent: "transparent",
      current: "currentColor",

      backgroundpink: {
        DEFAULT: "#faeaf5",
      },
      primarypink: {
        DEFAULT: "#eaa4b1",
      },
      vanilla: {
        DEFAULT: "#f7e6de",
      },
      accentorange: {
        DEFAULT: "#eabaa4",
      }

    },
    extend: {},
  },
  plugins: [],
}

HTML (index.html):

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body class="bg-black">
    
</body>
</html>
bonk
  • 33
  • 3

1 Answers1

1

The color black does not exist in the final resolved Tailwind configuration because you have completely overridden the default Tailwind colors by specifying theme.colors object.

If you did indeed want to completely override the default Tailwind colors but still want black as a color, add it to theme.colors.black:

/** @type {import('tailwindcss').Config} */
module.exports = {
  // …
  theme: {
    colors: {
      // …
      black: '#000',
    },
    extend: {},
  },
  // …
}

Otherwise, if you wanted to keep the default Tailwind colors but define yours in addition:

/** @type {import('tailwindcss').Config} */
module.exports = {
  // …
  theme: {
    extend: {
      colors: {
        // `transparent` and `current` aren't strictly needed here
        // since they are in the default Tailwind color palette.
        // transparent: "transparent",
        // current: "currentColor",
        backgroundpink: {
          DEFAULT: "#faeaf5",
        },
        primarypink: {
          DEFAULT: "#eaa4b1",
        },
        vanilla: {
          DEFAULT: "#f7e6de",
        },
        accentorange: {
          DEFAULT: "#eabaa4",
        }
      },
    },
  },
  // …
}
Wongjn
  • 8,544
  • 2
  • 8
  • 24
  • Thank you so much! I figured it would be something to do with the config since I never understood it anyway. – bonk May 28 '23 at 14:11