I m trying to set a background color for a div in a component, for light and dark themes, but I m not getting the result I expect.

On one side, bg-gray-400 and dark:bg-gray-100 are not changing anything. Also, bg-[#2a2e35] and dark:bg-[#3b65ae] shows color #2a2e35 on dark mode.

---
export interface Props {
  title: string;
  body: string;
  ogImage?: string;
  href: string;
  published: Date;
}

const { href, title, body, ogImage, published } = Astro.props;
---

<a href={href}>
  <div
    class="bg-gray-400 dark:bg-gray-100 w-full rounded-lg border shadow duration-200 ease-in hover:scale-105"
  >
    <img class="rounded-t-lg" src={ogImage} alt="" />
    <div class="p-5 bg-[#2a2e35] dark:bg-[#3b65ae]">
      <h5
        class="text-gray-900 dark:text-white mb-4 text-sm font-bold tracking-tight"
      >
        {title}
      </h5>
      <p
        class="text-gray-700 dark:text-gray-400 mb-12 text-sm font-normal"
      >
        {body}
      </p>
    </div>
  </div>
</a>

tailwind.config.cjs

/** @type {import( tailwindcss ).Config} */

function withOpacity(variableName) {
  return ({ opacityValue }) => {
    if (opacityValue !== undefined) {
      return `rgba(var(${variableName}), ${opacityValue})`;
    }
    return `rgb(var(${variableName}))`;
  };
}

module.exports = {
  content: ["./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}"],
  theme: {
    // Remove the following screen breakpoint or add other breakpoints
    // if one breakpoint is not enough for you
    screens: {
      sm: "640px",
      md: "768px",
      lg: "1024px",
      xl: "1280px",
    },

    // Uncomment the following extend
    // if existing Tailwind color palette will be used

    // extend: {
    textColor: {
      skin: {
        base: withOpacity("--color-text-base"),
        accent: withOpacity("--color-accent"),
        inverted: withOpacity("--color-fill"),
      },
    },
    backgroundColor: {
      skin: {
        fill: withOpacity("--color-fill"),
        accent: withOpacity("--color-accent"),
        inverted: withOpacity("--color-text-base"),
        card: withOpacity("--color-card"),
        "card-muted": withOpacity("--color-card-muted"),
      },
    },
    outlineColor: {
      skin: {
        fill: withOpacity("--color-accent"),
      },
    },
    borderColor: {
      skin: {
        line: withOpacity("--color-border"),
        fill: withOpacity("--color-text-base"),
        accent: withOpacity("--color-accent"),
      },
    },
    fill: {
      skin: {
        base: withOpacity("--color-text-base"),
        accent: withOpacity("--color-accent"),
      },
      transparent: "transparent",
    },
    fontFamily: {
      mono: ["Open Sans", "sans-serif"],
    },
    // },
  },
  plugins: [require("@tailwindcss/typography")],
};

I want to have color #3b65ae on dark theme and #2a2e35 on light theme.

I m not very used to Tailwind but I m doing what I saw in some documentation.

Light Theme Dark Theme