VSCode Tailwindcss Intellisense Not Working When Plugins Are Present

[boblz7]

Got it working in UPDATE 2

---

I've narrowed it down to plugins property. Whichever plugin I put there the intellisense is not working.

Important

• When you remove all plugins and leave the plugin property an empty array the intellisense works.
• Whichever plugin I put there the intellisense is not working.

Info about versions

VS Code version

• Version: 1.96.4

Tailwind CSS IntelliSense version

• Version: 0.14.1

Tailwind CSS version

• Version: 3.4.1

Package manager

• npm

Operating system

• macOS

Tailwind config

import type { Config } from "tailwindcss";
import animatePlugin from "tailwindcss-animate";

export default {
  content: [],
  theme: {
    extend: {},
  },
  plugins: [animatePlugin],
} satisfies Config;

UPDATE 2:

First of all, I get it working by first installing NextJS 14 with React 18 and migrating to NextJS 15 with React 19. I'll explain steps below when I got intellisense working vs when it was not working as a summary.

Steps when intellisense does not work!

Not Working

Whenever I tried installing NextJS 15 and changing something inside tailwind.config.ts

• Installing NextJS 15 with Tailwind
• Installing NextJS 15 without Tailwind and add additional packages

Steps when intellisense is working!

Working

1. Install NextJS 14 with npx create-next-app@14
   1.1. Basically the default configuration, typescript, tailwind, app folder, src folder, no turbo, no changing paths
2. Install zustand with npm install zustand
3. Install shadcn with npx shadcn@latest init
4. Install tailwind class formatting with npm i prettier-plugin-tailwindcss --save-dev
5. Here I update a few things:

• Update tailwind.config.ts by adding spacing: { 5.25: rem(21), } property to theme.extend
  • I create helper class for converting px to rem and call it inside tailwind config and I use it to add a new spacing, 5.25: rem(21)
• Basically when I import the function as shown the intellisense is not working

import { rem } from "**@/lib/utils";

• But when I change the import to the following intellisense it works - (No Idea Why)

import { rem } from "./src/lib/utils";

• I also had an issue where tsconfig.json paths were not working so I had to add "baseUrl": "." to tsconfig.json

6. Now I migrate to NextJS 15 with npx @next/codemod@canary upgrade latest
   6.1. I follow the instructions and install everything it asked me to.
7. Here I tested intellisense again and it works. I tested trying the following:

• Reloading window
• Adding new properties tailwind.config.ts
• Exiting VSCode and opening again

UPDATE:

When I have color and borderRadius properties in theme.extend the intellisense works. (I've started with this included in the basic setup but I thought it irrelevant until now)

Code

colors: {
  background: "hsl(var(--background))",
  foreground: "hsl(var(--foreground))",
  card: {
    DEFAULT: "hsl(var(--card))",
    foreground: "hsl(var(--card-foreground))",
  },
  popover: {
    DEFAULT: "hsl(var(--popover))",
    foreground: "hsl(var(--popover-foreground))",
  },
  primary: {
    DEFAULT: "hsl(var(--primary))",
    foreground: "hsl(var(--primary-foreground))",
  },
  secondary: {
    DEFAULT: "hsl(var(--secondary))",
    foreground: "hsl(var(--secondary-foreground))",
  },
  muted: {
    DEFAULT: "hsl(var(--muted))",
    foreground: "hsl(var(--muted-foreground))",
  },
  accent: {
    DEFAULT: "hsl(var(--accent))",
    foreground: "hsl(var(--accent-foreground))",
  },
  destructive: {
    DEFAULT: "hsl(var(--destructive))",
    foreground: "hsl(var(--destructive-foreground))",
  },
  border: "hsl(var(--border))",
  input: "hsl(var(--input))",
  ring: "hsl(var(--ring))",
  chart: {
    "1": "hsl(var(--chart-1))",
    "2": "hsl(var(--chart-2))",
    "3": "hsl(var(--chart-3))",
    "4": "hsl(var(--chart-4))",
    "5": "hsl(var(--chart-5))",
  },
},
borderRadius: {
  lg: "var(--radius)",
  md: "calc(var(--radius) - 2px)",
  sm: "calc(var(--radius) - 4px)",
},

But when I add property spacing to theme.extend the intellisense is not working.

Code

spacing: {
  5.25: rem(21),
},