Closed
Description
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.
Metadata
Metadata
Assignees
Labels
No labels