TypeScript config files not working in Intellisense via @config in v4

[ivodolenc]

What version of VS Code are you using?

• 1.94.0

What version of Tailwind CSS IntelliSense are you using?

• 0.13.45

What version of Tailwind CSS are you using?

• 4.0.0-alpha.29

What package manager are you using?

• pnpm

What operating system are you using?

• macOS Sequoia 15.0.1

Current Behavior

Hi, intellisense doesn't work correctly in v4 for custom utilities even if they are specified via TypeScript config.

I read somewhere in the issues that custom classes do not provideautocompletion if they are specified via CSS API (via layer utilities {...} ), but classes that are specified via JavaScript Config API (config.plugins) should work normally.

Default Tailwind classes (theme API like flex, bg-white, space-x-1 etc.) work as expected with intellisense, but custom classes defined via TS configuration do not show up in autocomplete.

Here's a minimal reproduction:

// package.json

{
  "devDependencies": {
    "@tailwindcss/vite": "4.0.0-alpha.29",
    "tailwindcss": "4.0.0-alpha.29",
    // ...
  }
}

// .vscode/settings.json

{
  "editor.quickSuggestions": {
    "strings": true
  },
  "files.associations": {
    "*.css": "tailwindcss"
  },
  "tailwindCSS.experimental.configFile": "./src/styles/app.css"
}

/* src/styles/app.css */

@config "../../tailwind.config.ts";
@import 'tailwindcss';

// tailwind.config.ts

import plugin from 'tailwindcss/plugin'
import type { Config } from 'tailwindcss'

const config: Config = {
  content: [
    './src/app.html',
    './src/components/**/*.svelte',
    './src/content/**/*.md',
    './src/routes/**/*.{js,ts,svelte}',
    './src/styles/**/*.css',
  ],

  theme: {
    extend: {
      fontSize: {
        '3xs': '0.5rem', // 8px
        '2xs': '0.625rem', // 10px
      },
      spacing: {
        '4.5': '1.125rem', // 18px
        '5.5': '1.375rem', // 22px
      },
      // ...
    },
  },

  plugins: [
    plugin(({ addUtilities }) => {
      addUtilities({
        '.font-100': {
          'font-variation-settings': "'wght' 100",
        },
        '.font-150': {
          'font-variation-settings': "'wght' 150",
        },
        '.font-200': {
          'font-variation-settings': "'wght' 200",
        },
        // ...
      })
    }),
  ],
}

export default config

So, all the additional classes that I specified in the TS config (via theme.extend and plugins) do not show up in the autocompletion.

Expected Behavior

The expected behavior would be that everything works fine.

[ivodolenc]

This seems to work as expected with the new CSS API in v4 though, which is awesome, didn't know that 👍🏻

I almost went through all the issues regarding v4 and stumbled upon this comment which helped me to figure how to specify custom utils with responsivnes. Also, intellisense works fine and there is no need for additional TS config (at least for now i did a quick test).

Here is the full example that works fine:

// package.json

{
  "devDependencies": {
    "@tailwindcss/vite": "4.0.0-alpha.30",
    "tailwindcss": "4.0.0-alpha.30",
    // ...
  }
}

// .vscode/settings.json

{
  "editor.quickSuggestions": {
    "strings": true
  },
  "files.associations": {
    "*.css": "tailwindcss"
  },
  "tailwindCSS.experimental.configFile": "./src/styles/app.css"
}

/* src/styles/app.css */

@layer theme, base;

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

/* src/styles/theme.css */

@theme {
  --font-family-sans: 'AspektaVF', sans-serif;

  /* Spacing */
  --spacing-4_5: 1.125rem; /* 18px */
  --spacing-5_5: 1.375rem; /* 22px */

  /* Font size */
  --font-size-3xs: 0.5rem; /* 8px */
  --font-size-2xs: 0.625rem; /* 10px */
}

/* src/styles/base.css */

html {
  @apply bg-black text-white;
}

/* src/styles/utilities.css */

@utility font-100 {
  font-variation-settings: 'wght' 100;
}

@utility font-150 {
  font-variation-settings: 'wght' 150;
}

@utility font-200 {
  font-variation-settings: 'wght' 200;
}

Now autocompletion works for all @theme and @utility classes as expected.

If there was some kind of temporary docs for this new API, that would be very helpful. Also, maybe it wouldn't be a bad idea to implement this for the JS API as well to make it easier to migrate from v3 to v4 version.

[thecrypticace]

Ah yep — this is a bug. We need to compile the TypeScript to JS before loading the file.