Skip to content

[Bug]: Tailwind IntelliSense suggestions don't appear until - is typed #1611

Open
Open
[Bug]: Tailwind IntelliSense suggestions don't appear until - is typed#1611

Description

@adnan-bhaldar
adnan-bhaldar
opened on Aug 15, 2026

What version of VS Code are you using?

1.133.0

What version of Tailwind CSS IntelliSense are you using?

0.16.0

What version of Tailwind CSS are you using?

4.3.3

What package manager are you using?

npm

What operating system are you using?

Windows

Tailwind CSS Stylesheet (v4) or config file (v3)

// Paste the contents of your CSS file or config file here

@import url('https://fonts.googleapis.com/css2?family=Inter:opsz,wght@14..32,300;14..32,400;14..32,500;14..32,600;14..32,700&family=JetBrains+Mono:wght@400;500&display=swap');

@import "tailwindcss";

:root {
  --font-sans: 'Inter', system-ui, -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', monospace;

  --r-xs: 4px;
  --r-sm: 6px;
  --r-md: 8px;
  --r-lg: 12px;
  --r-xl: 16px;
  --r-2xl: 20px;
  --r-3xl: 28px;
  --r-full: 9999px;

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-std: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast: 110ms;
  --dur-base: 180ms;
  --dur-slow: 320ms;

  --accent: #6366f1;
  --accent-2: #8b5cf6;
  --accent-hover: #5254cc;
  --accent-dim: rgba(99, 102, 241, 0.12);
  --accent-soft: rgba(99, 102, 241, 0.20);
  --accent-glow: rgba(99, 102, 241, 0.45);
  --accent-border: rgba(99, 102, 241, 0.30);
  --accent-fg: #ffffff;
  --gradient-accent: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
}

/* ── DARK THEME ─────────────────────────────────── */
html.theme-dark,
:root {
  color-scheme: dark;

  --bg-app: #0d0d14;
  --bg-base: #11111a;
  --bg-panel: #14141f;
  --bg-card: #19192b;
  --bg-elevated: #1e1e30;
  --bg-overlay: #23233a;
  --bg-float: #282840;

  --s1: #14141f;
  --s2: #19192b;
  --s3: #1e1e30;
  --s4: #25253c;
  --s5: #2c2c48;
  --s6: #333352;

  --tx-1: #eeeeff;
  --tx-2: rgba(200, 200, 235, 0.68);
  --tx-3: rgba(160, 160, 205, 0.44);
  --tx-4: rgba(130, 130, 175, 0.26);
  --tx-inv: #0d0d14;

  --border: rgba(140, 140, 210, 0.10);
  --border-soft: rgba(140, 140, 210, 0.05);
  --border-hard: rgba(140, 140, 210, 0.20);

  --hover: rgba(140, 140, 255, 0.07);
  --active: rgba(140, 140, 255, 0.13);
  --press: rgba(140, 140, 255, 0.18);

  --glass-bg: rgba(15, 15, 25, 0.82);
  --glass-border: rgba(140, 140, 220, 0.11);

  --nav-bg: rgba(10, 10, 18, 0.90);
  --nav-border: rgba(140, 140, 210, 0.09);

  --sidebar-bg: #11111a;
  --panel-bg: #11111a;
  --canvas-bg: #080810;

  --sh-xs: 0 1px 3px rgba(0, 0, 0, 0.55);
  --sh-sm: 0 2px 10px rgba(0, 0, 0, 0.45), 0 1px 3px rgba(0, 0, 0, 0.30);
  --sh-md: 0 4px 24px rgba(0, 0, 0, 0.55), 0 2px 8px rgba(0, 0, 0, 0.30);
  --sh-lg: 0 8px 40px rgba(0, 0, 0, 0.65), 0 4px 12px rgba(0, 0, 0, 0.35);
  --sh-xl: 0 20px 60px rgba(0, 0, 0, 0.72), 0 8px 24px rgba(0, 0, 0, 0.40);
  --sh-dialog: 0 32px 80px rgba(0, 0, 0, 0.82), 0 8px 40px rgba(0, 0, 0, 0.55);
  --sh-accent: 0 4px 28px rgba(99, 102, 241, 0.50), 0 2px 8px rgba(99, 102, 241, 0.28);
  --sh-card: 0 0 0 1px var(--border), var(--sh-md);

  --sb-thumb: rgba(140, 140, 220, 0.16);
  --sb-hover: rgba(140, 140, 220, 0.30);
}

/* ── LIGHT THEME ────────────────────────────────── */
html.theme-light {
  color-scheme: light;

  --bg-app: #f4f4f8;
  --bg-base: #ededf5;
  --bg-panel: #e8e8f2;
  --bg-card: #ffffff;
  --bg-elevated: #ffffff;
  --bg-overlay: #ffffff;
  --bg-float: #ffffff;

  --s1: #ededf5;
  --s2: #e8e8f2;
  --s3: #e0e0ec;
  --s4: #d5d5e6;
  --s5: #c8c8da;
  --s6: #b8b8ce;

  --tx-1: #1a1a2e;
  --tx-2: rgba(35, 35, 70, 0.62);
  --tx-3: rgba(55, 55, 100, 0.40);
  --tx-4: rgba(75, 75, 130, 0.25);
  --tx-inv: #ffffff;

  --border: rgba(80, 80, 150, 0.11);
  --border-soft: rgba(80, 80, 150, 0.06);
  --border-hard: rgba(80, 80, 150, 0.20);

  --hover: rgba(80, 80, 180, 0.055);
  --active: rgba(80, 80, 180, 0.10);
  --press: rgba(80, 80, 180, 0.15);

  --glass-bg: rgba(240, 240, 250, 0.88);
  --glass-border: rgba(100, 100, 200, 0.12);

  --nav-bg: rgba(236, 236, 246, 0.92);
  --nav-border: rgba(80, 80, 150, 0.09);

  --sidebar-bg: #e8e8f2;
  --panel-bg: #e8e8f2;
  --canvas-bg: #dcdce8;

  --sh-xs: 0 1px 3px rgba(40, 40, 100, 0.07);
  --sh-sm: 0 2px 10px rgba(40, 40, 100, 0.09), 0 1px 3px rgba(40, 40, 100, 0.05);
  --sh-md: 0 4px 24px rgba(40, 40, 100, 0.11), 0 2px 8px rgba(40, 40, 100, 0.06);
  --sh-lg: 0 8px 40px rgba(40, 40, 100, 0.13), 0 4px 12px rgba(40, 40, 100, 0.07);
  --sh-xl: 0 20px 60px rgba(40, 40, 100, 0.15), 0 8px 24px rgba(40, 40, 100, 0.08);
  --sh-dialog: 0 32px 80px rgba(40, 40, 100, 0.18), 0 8px 40px rgba(40, 40, 100, 0.10);
  --sh-accent: 0 4px 28px rgba(99, 102, 241, 0.38), 0 2px 8px rgba(99, 102, 241, 0.20);
  --sh-card: 0 0 0 1px var(--border), var(--sh-md);

  --sb-thumb: rgba(80, 80, 160, 0.15);
  --sb-hover: rgba(80, 80, 160, 0.28);
}

VS Code settings

// Paste your VS Code settings in JSON format here

{
  "explorer.confirmDelete": false,
  "files.autoSave": "afterDelay",
  "workbench.preferredHighContrastLightColorTheme": "Default High Contrast",
  "editor.fontFamily": "Consolas, ‘Courier New’, monospace",
  "explorer.confirmDragAndDrop": false,
  "workbench.editorAssociations": {
    "*.apk": "default"
  },
  "[html]": {
    "editor.defaultFormatter": "vscode.html-language-features"
  },
  "github.copilot.advanced": {},
  "mssql.autoDisableNonTSqlLanguageService": false,
  "oneDarkPro.vivid": false,
  "security.workspace.trust.untrustedFiles": "open",
  "errorLens.excludeWorkspaces": [
    "e:\\Music"
  ],
  "liveServer.settings.donotVerifyTags": true,
  "cSpell.userWords": [
    "gifs",
    "imagekit",
    "linkendin",
    "uncategorized",
    "VITE",
    "whook"
  ],
  "[javascript]": {
    "editor.defaultFormatter": "vscode.typescript-language-features"
  },
  "cSpell.ignoreWords": [
    "Adnan"
  ],
  "[javascriptreact]": {
    "editor.defaultFormatter": "vscode.typescript-language-features"
  },
  "editor.wordWrap": "on",
  "[css]": {
    "editor.defaultFormatter": "vscode.css-language-features"
  },
  "[json]": {
    "editor.defaultFormatter": "vscode.json-language-features"
  },
  "git.confirmSync": false,
  "[typescriptreact]": {
    "editor.defaultFormatter": "vscode.typescript-language-features"
  },
  "git.enableSmartCommit": true,
  "javascript.updateImportsOnFileMove.enabled": "always",
  "editor.smoothScrolling": true,
  "http.systemCertificatesNode": true,
  "workbench.colorTheme": "One Dark Pro",
  "workbench.iconTheme": "material-icon-theme",
  "[vue]": {
    "editor.defaultFormatter": "Vue.volar"
  },
  "[java]": {
    "editor.defaultFormatter": "redhat.java"
  },
  "[typescript]": {
    "editor.defaultFormatter": "vscode.typescript-language-features"
  },
  "git.replaceTagsWhenPull": true,
  "[xml]": {
    "editor.defaultFormatter": "csharpier.csharpier-vscode"
  },
  "workbench.browser.openLocalhostLinks": false
}

Reproduction STEPS

  1. Create a project using Tailwind CSS.
  2. Install and enable the Tailwind CSS IntelliSense VS Code extension.
  3. Open a JSX/TSX file.
  4. Add a className attribute.
  5. Start typing a Tailwind class, for example:
<div className="bg">
  1. Notice that no Tailwind suggestions appear.
  2. Type -:
<div className="bg-">
  1. Notice that the Tailwind suggestions immediately appear.

Describe your issue

Tailwind CSS IntelliSense autocomplete suggestions are not triggered when I start typing a Tailwind class.

For example, when I type:

<div className="bg">

I expect Tailwind CSS IntelliSense to immediately show relevant suggestions such as:

bg-black
bg-white
bg-red-500
bg-blue-500
...

However, no suggestions appear.

The suggestions only start appearing after I type the - character:

<div className="bg-">

At that point, IntelliSense starts working normally and displays the available bg-* classes.

The same behavior occurs with other Tailwind utilities where the - character is part of the class name. The autocomplete should ideally trigger as soon as I start typing the class prefix, rather than requiring me to type - first.

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    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