Issues with Intellisense after upgrading to Tailwind V4

[Plovst]

I'm having an issue with Intellisense no longer working after upgrading to V4. I can see others have issues with this, since the tailwind.config.js is no longer mandatory. In this case I'm still using it though, since it's a Wordpress setup and I'm using values from theme.json in my config.

Amongst other things, I've tried manually pointing to the config file like this, but it doesn't work:

  "tailwindCSS.experimental.configFile": "./tailwind/tailwind.config.js",

My tailwind.config.js looks like this:

/** @type {import('tailwindcss').Config} */
const includePreflight = "editor" === process.env._TW_TARGET ? false : true;

const themeJSON = require("../superego/theme.json");

const extractColors = (themeJSON) => {
  const colors = {};
  if (themeJSON?.settings?.color?.palette) {
    themeJSON.settings.color.palette.forEach((color) => {
      colors[color.slug] = color.color;
    });
  }
  return colors;
};

const colors = extractColors(themeJSON);

const fontFamilies = themeJSON.settings.typography.fontFamilies.reduce(
  (acc, font) => {
    acc[font.slug] = font.fontFamily;
    return acc;
  },
  {}
);

const fontSizes = themeJSON.settings.typography.fontSizes.reduce(
  (acc, size) => {
    acc[size.slug] = size.size;
    return acc;
  },
  {}
);

const lineHeights = themeJSON?.custom?.["line-height"] || {
  body: 1.3, // default values
  heading: 1.15, // default values
};

module.exports = {
  important: false,
  content: ["./superego/**/*.php", "./superego/theme.json"],
  theme: {
    extend: {
      fontFamily: {
        ...fontFamilies,
      },
      fontSize: {
        ...fontSizes,
      },
      colors,
      lineHeight: {
        body: lineHeights.body,
        heading: lineHeights.heading,
      },
    },
    screens: {
      sm: "640px",
      md: "768px",
      lg: "1024px",
      xl: "1200px",
      xxl: "1600px",
      // qhd: "2000px",
    },
  },
  corePlugins: {
    // Disable Preflight base styles in CSS targeting the editor.
    preflight: includePreflight,
  },
  plugins: [
    // require("@_tw/themejson"),
    require("../superego/theme.json"),
    require("@tailwindcss/typography"),
    //require('@tailwindcss/forms'),
    require("@tailwindcss/line-clamp"),
    require("@tailwindcss/aspect-ratio"),

    function ({ addComponents, theme }) {
      addComponents({
        ".container": {
          maxWidth: "100%",
          padding: "0 1.5rem",
          marginLeft: "auto",
          marginRight: "auto",
          "@screen sm": {
            maxWidth: "640px",
          },
          "@screen md": {
            maxWidth: "768px",
          },
          "@screen lg": {
            maxWidth: "1024px",
            padding: "0 2rem",
          },
          "@screen xl": {
            maxWidth: "1200px",
          },
          "@screen xxl": {
            maxWidth: "1600px",
          },
          // "@screen qhd": {
          //   maxWidth: "1600px",
          // },
        },
        ".container-fluid": {
          maxWidth: "100%",
          padding: "0 1.5rem",
          marginLeft: "auto",
          marginRight: "auto",
          "@screen sm": {
            // maxWidth: "640px",
          },
          "@screen md": {
            // maxWidth: "768px",
          },
          "@screen lg": {
            // maxWidth: "100vw",
            padding: "0 2rem",
          },
          // "@screen xxl": {
          //   padding: "0",
          // },
        },
        ".text-h1": {
          fontSize: theme("fontSize.h1"),
          lineHeight: theme("lineHeight.heading"),
        },
        ".text-h2": {
          fontSize: theme("fontSize.h2"),
          lineHeight: theme("lineHeight.heading"),
        },
        ".text-h3": {
          fontSize: theme("fontSize.h3"),
          lineHeight: theme("lineHeight.heading"),
        },
        ".text-h4": {
          fontSize: theme("fontSize.h4"),
          lineHeight: theme("lineHeight.heading"),
        },
        ".text-h5": {
          fontSize: theme("fontSize.h5"),
          lineHeight: theme("lineHeight.heading"),
        },
        ".text-h6": {
          fontSize: theme("fontSize.h6"),
          lineHeight: theme("lineHeight.heading"),
        },
      });
    },
  ],
};

Tailwind.css looks like this:

@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";

@layer base {
  h1 {
    @apply text-h1;
  }

  h2 {
    @apply text-h2;
  }

  h3 {
    @apply text-h3;
  }

  h4 {
    @apply text-h5 lg:text-h4;
  }

  h5 {
    @apply text-h5;
  }

  h6 {
    @apply text-lg;
  }

  ::selection {
    background: theme(colors.accent-b);
    color: theme(colors.white);
  }

  /* Admin styling */
  .block-editor-block-list__layout {
    @apply mt-8 prose-lg text-gray-900;
  }

  .block-editor-block-list__layout .block-editor-block-list__block {
    max-width: 1480px;
  }

  .block-editor-block-list__layout .swiper-wrapper {
    display: flex;
    gap: 1rem;
  }

  .block-editor-block-list__layout .swiper-slide {
    min-width: 50%;
  }

  .block-editor-block-list__layout .isotope {
    @apply grid grid-cols-2 gap-8;
  }

  .block-editor-block-list__layout img {
    opacity: 100% !important;
  }
}

Any obvious errors I'm not seeing?

[KostaJovic01]

Hello @Plovst
Tailwind now recommends configuring styles directly in the index.css file instead of using tailwind.config.ts.
Have you updated to the latest stable version of Tailwind?

[rozsazoltan]

Related: What's breaking changes from v4?

Comply with the new import steps

From v4 onwards, the plugin looks for the additional @import "tailwindcss";.

• Tailwind CSS IntelliSense: Installation
• Functions and directives: @import
• Removed @tailwind directives

@import "tailwindcss";

@layer base {
  /* ... */
}

Installation

Install via the Visual Studio Code Marketplace →

In order for the extension to activate you must have tailwindcss installed and one of these:

• For v4 and later, a .css file that imports a Tailwind CSS stylesheet (e.g. @import "tailwindcss")
• For v3 and earlier, a Tailwind CSS config file named tailwind.config.{js,cjs,mjs,ts,cts,mts} in your workspace.
• For v3 and earlier, a stylesheet that points to a config file via @config

If you want to split it into multiple parts, this shorthand means the following:

• Base styles: Preflight

@layer theme, base, components, utilities;

@import "tailwindcss/theme.css" layer(theme);
@import "tailwindcss/preflight.css" layer(base);
@import "tailwindcss/utilities.css" layer(utilities);

@layer base {
  /* ... */
}

Configuration

From version 4 onwards, the legacy JS-based configuration is no longer available by default. I recommend checking out the CSS-first configuration, which is the primarily recommended approach and provides configuration options directly from a CSS file.

• New CSS-first configuration option in v4
• Functions and directives
• Adding Custom Styles: Customizing your theme

If you still want to use the JS configuration, you need to specify its relative path with the @config directive.

@import "tailwindcss";

@config "../../tailwind.config.js";

@layer base {
  /* ... */
}

Tailwind CSS IntelliSense

• Tailwind CSS v4 - Unknown at rule @plugin, @custom-variant, @theme in global.css
• Displaying color boxes next to the TailwindCSS class names indicating the color, anywhere such as in class or className attributes
• Adding TailwindCSS association to Vue/Svelte/Astro file to disable "css(unknownAtRules): Unknown at rule @apply"

[mujtbabbas]

Your CSS entry is the main problem — it's written for v3. In v4 there are no tailwindcss/base, tailwindcss/components or tailwindcss/utilities entry points. The whole framework is a single import:

@import "tailwindcss";

As written, that import fails, so the CSS never compiles — and with nothing compiled, the language server has nothing to serve suggestions from. That's the "completely dead" IntelliSense you're seeing.

Then the JS config: v4 does not auto-load tailwind.config.js. If you want to keep using it, reference it explicitly from the CSS (path relative to the CSS file):

@import "tailwindcss";
@config "../tailwind.config.js";

(Or move the theme customisation into CSS with @theme and drop the JS config.)

Two more things to check once the import is fixed:

• Make sure the Tailwind CSS IntelliSense extension itself is up to date, and if it still doesn't pick up your entry file, point it at it via the tailwindCSS.experimental.configFile setting (in v4 setups this points at the CSS entry).
• Check that config file for errors: from your screenshot it require()s a theme.json and even lists theme.json under plugins. A config that throws will also silently kill IntelliSense. VS Code's Output panel → "Tailwind CSS" shows the language server's actual error, which will confirm which of these it was.

Fix the import first — in most of these upgrade cases that alone brings suggestions back.

[rozsazoltan]

Your CSS entry is the main problem — it's written for v3. In v4 there are no tailwindcss/base, tailwindcss/components or tailwindcss/utilities entry points. The whole framework is a single import:

???

I love AI generated answers... you should have just read my answer.

@layer theme, base, components, utilities;

@import "tailwindcss/theme.css" layer(theme);
@import "tailwindcss/preflight.css" layer(base);
@import "tailwindcss/utilities.css" layer(utilities);

@layer base {
  /* ... */
}

References:

• Issues with Intellisense after upgrading to Tailwind V4 #15959 (comment)
• https://tailwindcss.com/docs/preflight