CODEWITHSUNDEEP
csstailwind-csstailwind-3
bonk
bonk

Reputation: 33

Tailwind CSS is not outputting classes for the background

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>

Upvotes: 2

Views: 788

Answers (1)

Wongjn
Wongjn

Reputation: 24408

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",
        }
      },
    },
  },
  // …
}

Upvotes: 1

Related Questions