Skip to content

Not warning on conflict with transparent #753

Closed
@valtism

Description

@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.

Screenshot 2023-03-30 at 17 12 55

Screenshot 2023-03-30 at 17 13 00

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.

Metadata

Metadata

Assignees

Labels

No labels
No labels

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions