Not warning on conflict with transparent

[valtism]

What version of Tailwind CSS IntelliSense are you using?

v0.9.11

What version of Tailwind CSS are you using?

v3.3.0

What package manager are you using?

yarn

What operating system are you using?

macOS

Tailwind config

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./src/**/*.{js,jsx,ts,tsx}"],
  theme: {
    fontFamily: {
      sans: ["IBM Plex Sans", "sans-serif"],
      mono: ["IBM Plex Mono", "monospace"],
      emoji: [
        "Apple Color Emoji",
        "Segoe UI Emoji",
        "NotoColorEmoji",
        "Noto Color Emoji",
        "Segoe UI Symbol",
        "Android Emoji",
        "EmojiSymbols",
      ],
    },
    fontSize: {
      8: ["8px", { letterSpacing: "0.02em", lineHeight: "16px" }],
      10: ["10px", { letterSpacing: "0.02em", lineHeight: "16px" }],
      12: ["12px", { letterSpacing: "0.01em", lineHeight: "16px" }],
      14: ["14px", { letterSpacing: "0.01em", lineHeight: "20px" }],
      16: ["16px", { letterSpacing: "0em", lineHeight: "24px" }],
      20: ["20px", { letterSpacing: "-0.02em", lineHeight: "32px" }],
      24: ["24px", { letterSpacing: "-0.024em", lineHeight: "32px" }],
      32: ["32px", { letterSpacing: "-0.032em", lineHeight: "40px" }],
      40: ["40px", { letterSpacing: "-0.04em", lineHeight: "56px" }],
      48: ["48px", { letterSpacing: "-0.04em", lineHeight: "64px" }],
      56: ["56px", { letterSpacing: "-0.04em", lineHeight: "64px" }],
      64: ["64px", { letterSpacing: "-0.04em", lineHeight: "80px" }],
      72: ["72px", { letterSpacing: "-0.04em", lineHeight: "80px" }],
      80: ["80px", { letterSpacing: "-0.04em", lineHeight: "80px" }],
      96: ["96px", { letterSpacing: "-0.04em", lineHeight: "96px" }],
    },
    extend: {
      colors: {
        gray: {
          100: "#f6f8fa",
          200: "#edf0f2",
          300: "#d1d8e0",
          400: "#b1bbc7",
          500: "#919daf",
          600: "#627491",
          700: "#415372",
          800: "#213252",
          900: "#001133",
        },
        red: {
          100: "#fff6f6",
          200: "#ffd3d3",
          300: "#ffa0a0",
          400: "#f68484",
          500: "#ee6868",
          600: "#e54c4c",
          700: "#bc5959",
          800: "#9b2c2c",
          900: "#742a2a",
        },
        orange: {
          100: "#fffaf0",
          200: "#feebc8",
          300: "#fbd38d",
          400: "#f6ad55",
          500: "#f97850",
          600: "#e75d32",
          700: "#d1471d",
          800: "#b5360f",
          900: "#952806",
        },
        yellow: {
          100: "#fff8de",
          200: "#fff2bd",
          300: "#ffe383",
          400: "#fbd878",
          500: "#f4c222",
          600: "#e3b111",
          700: "#ce9f07",
          800: "#b48a02",
          900: "#957201",
        },
        green: {
          100: "#e0fdf5",
          200: "#97ebd3",
          300: "#4ed8b1",
          400: "#05c68f",
          500: "#25c295",
          600: "#44bd9b",
          700: "#64b9a1",
          800: "#0f936e",
          900: "#10523f",
        },
        teal: {
          100: "#effcfc",
          200: "#c5eaea",
          300: "#9ad8d8",
          400: "#33cccc",
          500: "#1eb7b7",
          600: "#109d9d",
          700: "#067d7d",
          800: "#025858",
          900: "#003333",
        },
        blue: {
          100: "#ebf8ff",
          200: "#b7e0ff",
          300: "#83c7ff",
          400: "#6caeff",
          500: "#5496ff",
          600: "#3d7dff",
          700: "#0051ff",
          800: "#0050af",
          900: "#032a76",
        },
        indigo: {
          100: "#ebf4ff",
          200: "#c3dafe",
          300: "#a3bffa",
          400: "#7f9cf5",
          500: "#667eea",
          600: "#5a67d8",
          700: "#4c51bf",
          800: "#434190",
          900: "#3c366b",
        },
        purple: {
          100: "#f7f7ff",
          200: "#dbd8ff",
          300: "#bebafe",
          400: "#a29bfe",
          500: "#7f7cf2",
          600: "#5c5ce5",
          700: "#483ebd",
          800: "#342196",
          900: "#20036e",
        },
        pink: {
          100: "#f4ecee",
          200: "#e8d9dd",
          300: "#d9b3be",
          400: "#c792a2",
          500: "#ff5a89",
          600: "#db4478",
          700: "#b82f67",
          800: "#941956",
          900: "#700345",
        },
      },
      opacity: {
        15: "0.15",
      },
      spacing: {
        120: "30rem",
        156: "39rem",
        "page-margin": "6.25%",
      },
      zIndex: {
        60: "60",
        70: "70",
      },
    },
  },
  plugins: [
    /**
     * Add plugins to extend tailwind's capabilities
     * You can find plugins at:
     * https://www.tailwindtoolbox.com/plugins and
     * https://github.com/aniftyco/awesome-tailwindcss
     **/

    // https://github.com/tailwindlabs/tailwindcss-typography
    require("@tailwindcss/typography"),
  ],
};

VS Code settings

{
  "editor.inlineSuggest.enabled": true,
  "git.enableSmartCommit": true,
  "git.confirmSync": false,
  "git.autofetch": true,
  "workbench.colorCustomizations": {
    "terminal.foreground": "#C5C8C6",
    "terminalCursor.background": "#C5C8C6",
    "terminalCursor.foreground": "#C5C8C6",
    "terminal.ansiBlack": "#1E1E1E",
    "terminal.ansiBlue": "#81A2BE",
    "terminal.ansiBrightBlack": "#969896",
    "terminal.ansiBrightBlue": "#81A2BE",
    "terminal.ansiBrightCyan": "#8ABEB7",
    "terminal.ansiBrightGreen": "#B5BD68",
    "terminal.ansiBrightMagenta": "#B294BB",
    "terminal.ansiBrightRed": "#CC6666",
    "terminal.ansiBrightWhite": "#FFFFFF",
    "terminal.ansiBrightYellow": "#F0C674",
    "terminal.ansiCyan": "#8ABEB7",
    "terminal.ansiGreen": "#B5BD68",
    "terminal.ansiMagenta": "#B294BB",
    "terminal.ansiRed": "#CC6666",
    "terminal.ansiWhite": "#C5C8C6",
    "terminal.ansiYellow": "#F0C674"
  },
  "typescript.preferences.importModuleSpecifier": "non-relative",
  "javascript.preferences.importModuleSpecifier": "non-relative",
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "prettier.documentSelectors": ["**/*.astro"],
  "color-highlight.markerType": "underline",
  "explorer.confirmDragAndDrop": false,
  "explorer.confirmDelete": false,
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    "astro",
    "typescript",
    "typescriptreact"
  ],
  "githubPullRequests.pullBranch": "never",
  "editor.linkedEditing": true,
  "javascript.updateImportsOnFileMove.enabled": "always",
  "typescript.updateImportsOnFileMove.enabled": "always",
  "typeChallenges.workspaceFolder": "/Users/valtism/.typeChallenges",
  "git.pullTags": false,
  "editor.stickyScroll.enabled": true,
  "zenMode.fullScreen": false,
  "git.inputValidation": "off",
  "ruby.useBundler": true,
  "ruby.useLanguageServer": true,
  "ruby.lint": {
    "rubocop": {
      "useBundler": true
    },
    "reek": {
      "useBundler": true
    }
  },
  "ruby.format": "rubocop",
  "[ruby]": {
    "editor.defaultFormatter": "rebornix.ruby"
  },
  "github.copilot.enable": {
    "*": true,
    "yaml": true,
    "plaintext": true,
    "markdown": true
  },
  "redhat.telemetry.enabled": true,
  "[xml]": {
    "editor.defaultFormatter": "redhat.vscode-xml"
  },
  "[prisma]": {
    "editor.defaultFormatter": "Prisma.prisma"
  },
  "editor.tabSize": 2,
  "sqltools.useNodeRuntime": true,
  "sqltools.autoOpenSessionFiles": false,
  "sqltools.results.location": "current",
  "sqltools.disableNodeDetectNotifications": true,
  "workbench.colorTheme": "Default Dark+ Experimental",
  "css.lint.unknownAtRules": "ignore",
  "previewjs.codelens": false
}

Reproduction URL

https://play.tailwindcss.com/KJcSdETira

Describe your issue

The linter will pick up a conflict between background colors, but not between a background color and bg-transparent.

This caused a bug today when I updated tailwind on prod and the order of utility classes must have changed. I had both a color background and transparent, and the transparent replaced the color. I would have expected the linter to pick this up.