I looked at the issues at GitHub and since it used to work in my project it’s probably a configuration problem instead of a bug so I don’t want to open a new issue.

I have a React project that uses tailwindcss. All of the utility classes work as intended, except the .bg-* ones. The custom theme ones work but for some reason the built-in colors do not. The .text-* ones work so it must not be a `tailwind.config.js issue. Here is my configuration:

/** @type {import('tailwindcss').Config} */
export default {
    content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
    theme: {
        extend: {
            colors: {
                paper: {
                    300: "#1a1a1c",
                    400: "#25272b",
                    500: "#151417"
                }
            },
            keyframes: {
                slideLeftAndFade: {
                    from: { opacity: 0, transform: "translateX(2px)" },
                    to: { opacity: 1, transform: "translateX(0)" }
                }
            },
            animation: {
                slideLeftAndFade:
                    "slideLeftAndFade 400ms cubic-bezier(0.16, 1, 0.3, 1)"
            }
        }
    },
    plugins: []
};

Here’s the snippet of the React component that does not work:

function DrawerItem({
    label,
    icon,
    background
}: DrawerItemProps) {
    const clsRoot = clsx(
        `flex items-center justify-center h-14 w-14 rounded bg-${background}-400/20`
    );
    // background prop is a string of built-in color such as 'green', 'blue', 'yellow', etc...

    return (
        ...
        <button className={clsRoot}>
            <Icon icon={icon} width={32} />
        </button>
        ...
    );
}

The problem is that when I inspect the button from the DevTools, all of the other utilities are working properly except for the background color. The background color of my custom color paper work. Here is a screenshot so you can see it yourself:

Screenshot of the DevTools

I kind of tried everything I could think of but I am running out of ideas. It isn’t the theme, it isn’t the index.css @include‘s, it isn’t the clsx helper either…

I was expecting to see the .bg-green-400/20 class in the DevTools.