V4 config errors

[alec-c4]

What version of VS Code are you using?

Version: 1.97.0
Commit: 33fc5a94a3f99ebe7087e8fe79fbe1d37a251016
Date: 2025-02-04T22:41:26.688Z
Electron: 32.2.7
ElectronBuildId: 10660205
Chromium: 128.0.6613.186
Node.js: 20.18.1
V8: 12.8.374.38-electron.0
OS: Darwin arm64 24.3.0

What version of Tailwind CSS IntelliSense are you using?

0.14.3

What version of Tailwind CSS are you using?

4.0.4

What package manager are you using?

yarn

What operating system are you using?

macOS

Tailwind config

@import "tailwindcss";

@plugin '@tailwindcss/forms';
@plugin '@tailwindcss/typography';
@plugin '@tailwindcss/container-queries';
@plugin 'flowbite/plugin';

@source './**/*.css';
@source '../../../node_modules/flowbite/**/*.js';

@custom-variant dark (@media (prefers-color-scheme: dark));
@theme {
  --font-*: initial;
  --font-body: Manrope, Inter, ui-sans-serif, system-ui, -apple-system,
    system-ui, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif,
    Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
  --font-sans: Manrope, Inter, ui-sans-serif, system-ui, -apple-system,
    system-ui, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif,
    Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;

  --color-primary-50: #fdf2f2;
  --color-primary-100: #fde8e8;
  --color-primary-200: #fbd5d5;
  --color-primary-300: #f8b4b4;
  --color-primary-400: #f98080;
  --color-primary-500: #f05252;
  --color-primary-600: #e02424;
  --color-primary-700: #c81e1e;
  --color-primary-800: #9b1c1c;
  --color-primary-900: #771d1d;
}

/*
  The default border color has changed to `currentColor` in Tailwind CSS v4,
  so we've added these compatibility styles to make sure everything still
  looks the same as it did with Tailwind CSS v3.

  If we ever want to remove these styles, we need to add an explicit border
  color utility to any element that depends on these defaults.
*/
@layer base {
  *,
  ::after,
  ::before,
  ::backdrop,
  ::file-selector-button {
    border-color: var(--color-gray-200, currentColor);
  }
}

@utility link-basic {
  @apply text-gray-500 hover:text-gray-900 dark:text-gray-400 dark:hover:text-white underline underline-offset-4;
}

.pagy {
  @apply flex font-sans text-sm font-medium text-gray-500;
}

.pagy > :not([hidden]) ~ :not([hidden]) {
  @apply -space-x-px;
}

.pagy a:not(.gap) {
  @apply flex items-center justify-center px-3 h-8 leading-tight text-gray-500 bg-white border border-gray-300 hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white;
}

.pagy a:not(.gap):not([href]) {
  @apply cursor-not-allowed bg-gray-100 text-gray-300;
}

.pagy a:not(.gap).current {
  @apply text-primary-600 bg-primary-50 border-gray-300 hover:bg-primary-100 hover:text-primary-700 dark:border-gray-700 dark:bg-gray-700 dark:text-white;
}

.pagy a:first-child {
  @apply rounded-s-lg;
}

.pagy a:last-child {
  @apply rounded-e-lg;
}

.pagy label {
  @apply inline-block whitespace-nowrap rounded-md bg-gray-200 px-3 py-1 text-gray-500;
}

.pagy label input {
  @apply rounded-md border-none bg-gray-100 text-gray-700 focus:ring-2 focus:ring-primary-500;
}

VS Code settings

{
  "application.shellEnvironmentResolutionTimeout": 30,

  "editor.accessibilitySupport": "off",
  "editor.autoIndent": "full",
  "editor.cursorBlinking": "expand",
  "editor.formatOnPaste": true,
  "editor.formatOnSave": true,
  "editor.formatOnType": true,
  "editor.guides.bracketPairs": true,
  "editor.insertSpaces": true,
  "editor.minimap.enabled": false,
  "editor.rulers": [120],
  "editor.semanticHighlighting.enabled": "configuredByTheme",
  "editor.tabSize": 2,
  "editor.unicodeHighlight.ambiguousCharacters": true,
  "editor.quickSuggestions": { "strings": "on" },

  "explorer.incrementalNaming": "disabled",

  "extensions.ignoreRecommendations": true,

  "files.autoSave": "onFocusChange",
  "files.defaultLanguage": "plaintext",
  "files.insertFinalNewline": true,
  "files.trimFinalNewlines": true,
  "files.trimTrailingWhitespace": true,
  "files.trimTrailingWhitespaceInRegexAndStrings": true,

  "files.associations": {
    "*.css": "tailwindcss",
    "*.erb": "erb",
    "*.html.erb": "erb",
    "*.yml": "yaml"
  },

  "git.autofetch": true,
  "git.confirmSync": false,
  "git.defaultBranchName": "master",
  "git.rebaseWhenSync": true,
  "git.autoStash": true,
  "git.branchProtection": ["master", "main"],

  "security.workspace.trust.banner": "never",
  "security.workspace.trust.enabled": false,
  "security.workspace.trust.startupPrompt": "never",

  "window.nativeTabs": true,
  "window.newWindowProfile": "Default",

  "workbench.startupEditor": "none",

  // Local settings

  "editor.fontFamily": "JetBrains Mono",
  "editor.fontLigatures": true,
  "editor.fontSize": 13,
  "terminal.external.osxExec": "Ghostty.app",
  "terminal.integrated.fontFamily": "MesloLGS NF",
  "terminal.integrated.fontSize": 13,
  "terminal.integrated.scrollback": 99999999999,
  "workbench.colorTheme": "Catppuccin Mocha",
  "workbench.iconTheme": "material-icon-theme",

  // Filetype related settings

  "[html]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },

  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },

  "[json]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },

  "[jsonc]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },

  "[ruby]": {
    "editor.defaultFormatter": "Shopify.ruby-lsp"
  },

  "[svelte]": {
    "editor.defaultFormatter": "svelte.svelte-vscode"
  }
}

Describe your issue

Migrated from v3 config to v4. There are a bunch of errors.

[thecrypticace]

huh I thought I fixed this. Will get that taken care of!

As a temporary workaround you can write the variant in the long-hand form to hide the errors:

@custom-variant dark {
  @media (prefers-color-scheme: dark) {
    @slot;
  }
}

[thecrypticace]

This will be fixed in the next release of the extension (may not happen until Monday tho). 👍