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"