tailwindcss-intellisense extension not working properly

[ShaquibKhanhub]

What version of VS Code are you using?

Most latest ver.

What version of Tailwind CSS IntelliSense are you using?
v0.12.3

What version of Tailwind CSS are you using?

"^3.4.1"

What package manager are you using?

npm

What operating system are you using?

Windows

Tailwind config

import type { Config } from "tailwindcss"

const config = {
darkMode: ["class"],
content: [
'./pages//*.{ts,tsx}',
'./components//.{ts,tsx}',
'./app/**/.{ts,tsx}',
'./src/**/*.{ts,tsx}',
],
prefix: "",
theme: {
container: {
center: true,
padding: "2rem",
screens: {
"2xl": "1400px",
},
},
extend: {
colors: {
border: "hsl(var(--border))",
input: "hsl(var(--input))",
ring: "hsl(var(--ring))",
background: "hsl(var(--background))",
foreground: "hsl(var(--foreground))",
primary: {
DEFAULT: "hsl(var(--primary))",
foreground: "hsl(var(--primary-foreground))",
},
secondary: {
DEFAULT: "hsl(var(--secondary))",
foreground: "hsl(var(--secondary-foreground))",
},
destructive: {
DEFAULT: "hsl(var(--destructive))",
foreground: "hsl(var(--destructive-foreground))",
},
muted: {
DEFAULT: "hsl(var(--muted))",
foreground: "hsl(var(--muted-foreground))",
},
accent: {
DEFAULT: "hsl(var(--accent))",
foreground: "hsl(var(--accent-foreground))",
},
popover: {
DEFAULT: "hsl(var(--popover))",
foreground: "hsl(var(--popover-foreground))",
},
card: {
DEFAULT: "hsl(var(--card))",
foreground: "hsl(var(--card-foreground))",
},
},
borderRadius: {
lg: "var(--radius)",
md: "calc(var(--radius) - 2px)",
sm: "calc(var(--radius) - 4px)",
},
keyframes: {
"accordion-down": {
from: { height: "0" },
to: { height: "var(--radix-accordion-content-height)" },
},
"accordion-up": {
from: { height: "var(--radix-accordion-content-height)" },
to: { height: "0" },
},
},
animation: {
"accordion-down": "accordion-down 0.2s ease-out",
"accordion-up": "accordion-up 0.2s ease-out",
},
},
},
plugins: [require("tailwindcss-animate")],
} satisfies Config

export default config

VS Code settings

// Paste your VS Code settings in JSON format here

Im not getting which settings i should provide like extention settings or what ,and you can tell me how to do it on mail : shaquibkhanrdx34@gmail.com

Reproduction URL

A public GitHub repo that includes a minimal reproduction of the bug. Please do not link to your actual project, what we need instead is a minimal reproduction in a fresh project without any unnecessary code. This means it doesn't matter if your real project is private/confidential, since we want a link to a separate, isolated reproduction anyways.

Describe your issue

Describe the problem you're seeing, any important steps to reproduce and what behavior you expect instead.

[ShaquibKhanhub]

Extension is not working properly mainly two things .

1. Autocomplete not working
2. when I'm hovering on any classes like text-lg it's should show me details in classic CSS .

[erquhart]

Stopped working about a week ago.

[ShaquibKhanhub]

Stopped working about a week ago.

Yeah but i thought it will work after sometime but it's not 🙂

[thecrypticace]

Closing in favor of #988 which is where we're tracking things.

@ShaquibKhanhub @erquhart Can you both update to the v0.12.4 release please. If you're still having problems can you provide your VSCode settings and details about your project in that issue? (A full reproduction would be very, very useful)

[ShaquibKhanhub]

What version of VS Code are you using?

Most latest ver.

What version of Tailwind CSS IntelliSense are you using? v0.12.3

What version of Tailwind CSS are you using?

"^3.4.1"

What package manager are you using?

npm

What operating system are you using?

Windows

Tailwind config

import type { Config } from "tailwindcss"

const config = { darkMode: ["class"], content: [ './pages//*.{ts,tsx}', './components//.{ts,tsx}', './app/**/.{ts,tsx}', './src/**/*.{ts,tsx}', ], prefix: "", theme: { container: { center: true, padding: "2rem", screens: { "2xl": "1400px", }, }, extend: { colors: { border: "hsl(var(--border))", input: "hsl(var(--input))", ring: "hsl(var(--ring))", background: "hsl(var(--background))", foreground: "hsl(var(--foreground))", primary: { DEFAULT: "hsl(var(--primary))", foreground: "hsl(var(--primary-foreground))", }, secondary: { DEFAULT: "hsl(var(--secondary))", foreground: "hsl(var(--secondary-foreground))", }, destructive: { DEFAULT: "hsl(var(--destructive))", foreground: "hsl(var(--destructive-foreground))", }, muted: { DEFAULT: "hsl(var(--muted))", foreground: "hsl(var(--muted-foreground))", }, accent: { DEFAULT: "hsl(var(--accent))", foreground: "hsl(var(--accent-foreground))", }, popover: { DEFAULT: "hsl(var(--popover))", foreground: "hsl(var(--popover-foreground))", }, card: { DEFAULT: "hsl(var(--card))", foreground: "hsl(var(--card-foreground))", }, }, borderRadius: { lg: "var(--radius)", md: "calc(var(--radius) - 2px)", sm: "calc(var(--radius) - 4px)", }, keyframes: { "accordion-down": { from: { height: "0" }, to: { height: "var(--radix-accordion-content-height)" }, }, "accordion-up": { from: { height: "var(--radix-accordion-content-height)" }, to: { height: "0" }, }, }, animation: { "accordion-down": "accordion-down 0.2s ease-out", "accordion-up": "accordion-up 0.2s ease-out", }, }, }, plugins: [require("tailwindcss-animate")], } satisfies Config

export default config

VS Code settings

User settings
{
"emmet.useInlineCompletions": true,
"explorer.confirmDelete": false,
"liveServer.settings.AdvanceCustomBrowserCmdLine": "chrome",
"liveServer.settings.ignoreFiles": [
".vscode/",
"/.scss",
"**/.sass",
"/*.ts"
],
"liveServer.settings.port": 0,
"[html]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"editor.wordWrap": "on",
"[javascript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"code-runner.runInTerminal": true,
"editor.accessibilitySupport": "on",
"[jsonc]": {
"editor.quickSuggestions": {
"other": "inline"
}
},
"[json]": {
"editor.suggest.snippetsPreventQuickSuggestions": true
},
"editor.quickSuggestions": {
"strings": "inline"
},
"tabnine.experimentalAutoImports": true,
"liveServer.settings.donotShowInfoMsg": true,
"[javascriptreact]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"editor.fontLigatures": true,
"editor.fontFamily": "'cascadia code',Consolas,'Courier New',monospace",
"remote.SSH.remotePlatform": {
"sandbox.7r4v79.csb": "linux"
},
"[css]": {
"editor.defaultFormatter": "vscode.css-language-features"
},
"files.autoSave": "afterDelay",
"quokka.compactMessageOutput": true,
"tabnine.debug": true,
"tabnine.disableFileRegex": [],
"[scss]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"editor.formatOnSave": true,
"editor.defaultFormatter": "esbenp.prettier-vscode",
"terminal.integrated.env.windows": {},
"console-ninja.toolsToEnableSupportAutomaticallyFor": {
"live-server-extension": true,
"live-preview-extension": true
},
"liveServer.settings.donotVerifyTags": true,
"editor.cursorBlinking": "expand",
"editor.cursorSmoothCaretAnimation": "on",
"terminal.integrated.env.linux": {},
"git.autofetch": true,
"gitlens.graph.layout": "editor",
"liveServer.settings.ChromeDebuggingAttachment": false,
"liveServer.settings.CustomBrowser": "microsoft-edge",
"console-ninja.featureSet": "Community",
"nxConsole.showNodeVersionOnStartup": false,
"terminal.integrated.enableMultiLinePasteWarning": false,
"files.exclude": {
"/.git": false,
"/.trunk/*actions/": true,
"/.trunk/*logs/": true,
"/.trunk/*notifications/": true,
"/.trunk/*out/": true,
"/.trunk/plugins/": true
},
"html-to-css-autocompletion.getSelectorsFromFileTypes": ["html", "php"],
"terminal.integrated.fontWeightBold": "bold",
"terminal.integrated.cursorBlinking": true,
"window.zoomLevel": 1,
"editor.fontSize": 16,
"workbench.editorAssociations": {
".md": "default"
},
"accessibility.signals.lineHasError": {
"sound": "off"
},
"accessibility.signals.lineHasFoldedArea": {
"sound": "off"
},
"accessibility.signals.lineHasBreakpoint": {
"sound": "off"
},
"accessibility.signals.lineHasInlineSuggestion": {
"sound": "off"
},
"accessibility.signals.onDebugBreak": {
"sound": "off"
},
"accessibility.signals.noInlayHints": {
"sound": "off"
},
"accessibility.signals.taskCompleted": {
"sound": "off"
},
"accessibility.signals.taskFailed": {
"sound": "off"
},
"accessibility.signals.notebookCellCompleted": {
"sound": "off"
},
"accessibility.signals.notebookCellFailed": {
"sound": "off"
},
"accessibility.signals.diffLineInserted": {
"sound": "off"
},
"accessibility.signals.diffLineDeleted": {
"sound": "off"
},
"accessibility.signals.diffLineModified": {
"sound": "off"
},
"javascript.updateImportsOnFileMove.enabled": "always",
"github.copilot.editor.enableAutoCompletions": true,
"files.watcherExclude": {
"/.trunk/*actions/": true,
"/.trunk/*logs/": true,
"/.trunk/*notifications/": true,
"/.trunk/*out/": true,
"/.trunk/*plugins/": true
},
"autoimport.doubleQuotes": true,
"workbench.colorTheme": "Ayu Light",
"vscode-edge-devtools.webhintInstallNotification": true,
"[typescriptreact]": {
"editor.defaultFormatter": "vscode.typescript-language-features"
},
"terminal.integrated.defaultProfile.windows": "Git Bash",
"cSpell.userWords": ["cloudinary", "Shaquib"],
"tailwindCSS.experimental.configFile": null,
"workbench.iconTheme": "material-icon-theme"
}

Im not getting which settings i should provide like extention settings or what ,and you can tell me how to do it on mail : [shaquibkhanrdx34@gmail.com](mailto:shaquibkhanrdx34@gmail.com)

**Reproduction URL**

A public GitHub repo that includes a minimal reproduction of the bug. **Please do not link to your actual project**, what we need instead is a _minimal_ reproduction in a fresh project without any unnecessary code. This means it doesn't matter if your real project is private/confidential, since we want a link to a separate, isolated reproduction anyways.

Still it's not working even when i hover on any tailwind classes which i have written and also not giving any  IntelliSense

Describe the problem you're seeing, any important steps to reproduce and what behavior you expect instead.

[ShaquibKhanhub]

i have provide my user settings.json it's after very long time but after that issue i was not using tailwind for CSS