The bg-transparent class does not exist. If bg-transparent is a custom class, make sure it is defined within a @layer directive.

[thecodenaut]

Can someone let me know why this one doesn't work?

@layer components {
    textarea {
        @apply bg-transparent;
    }
}

[adamwathan]

My guess is you have overridden your color palette in your tailwind.config.js file and your color palette no longer contains the transparent color.

[sibergenome]

What did you add to your tailwind config to fix this??

[sibergenome]

nevermind... solved with adding
.bg-transparent { background-color: 'transparent'; }
to css globals under @layer directive

[powderham]

I personally solved it by adding back in to the theme where i'd overridden it. I think this is preferable since it would work with all prefixes, not just bg-

 theme: {
    colors: {
      // my other colours
      transparent: 'transparent',
    },

[parthy007]

Thanks man, I was banging my head against this as I'm new to tailwind

[0x41-li]

I solved this by putting my custom colors under the extend property under the theme in the Tailwind config file, that way my colors are extended to the already existing Tailwind colors, and not overriding anything, which I don't understand why Tailwind removed the transparent class while I'm not overdoing it particularly, but anyway.

/** @type {import('tailwindcss').Config} */
export default {
  content: ["./index.html", "./src/**/*.{js,jsx,ts,tsx}"],
  theme: {
    fontFamily: {
      "space-grotesk": ["Space Grotesk", "sans-serif"],
    },
    extend: {
      colors: {
        "soft-black": "#151515",
        green: "#4EE1A0",
        "hard-gray": "#242424",
        "soft-gray": "#D9D9D9",
        white: "#FFFFFF",
      },
    },
  },
  plugins: [],
};

[topherfangio]

In case anyone else comes here for the same reason I did, you really must use the extend option instead of overriding the theme colors.

If you override, you need to provide ALL of the colors.

Extending allows you to add new ones to the existing ones.

Took me way to long to figure this out 🤦‍♂️

// tailwind.config.js

module.exports = {
  ...
  
  // BAD
  theme: {
    colors: {
      'mycustomcolor': '#ddff88'
    }
  }
  
  // GOOD
  theme: {
    extend: {
      colors: {
        'mycustomcolor': '#ddff88'
      }
    }
  }
  ...
}