Tailwind css autocomplete did not autocomplete value from preset

[shaifulpaynet]

What version of VS Code are you using?

For example: v1.87.0

What version of Tailwind CSS IntelliSense are you using?

For example: v0.10.5

What version of Tailwind CSS are you using?

For example: v3.4.1

What package manager are you using?

For example: npm

What operating system are you using?

For example: Pop OS (Linux)

Tailwind config

import type { Config } from 'tailwindcss'
import tailwindPreset from './tailwind-preset'

export default {
  presets: [tailwindPreset],
  content: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
  theme: {
    extend: {},
  },
  plugins: [],
} satisfies Config

tailwind-preset.ts

export default {
  screens: {
    "sm": "640px",
    "md": "768px",
    "lg": "1024px",
    "xl": "1280px",
    "2xl": "1536px",
    "mobile": { "max": "640px" }
  },
  extends: {
    spacing: {
      "000": "0rem",
      "005": "0.125rem",
      "010": "0.25rem",
      "015": "0.375rem",
      "020": "0.5rem",
      "025": "0.625rem",
      "030": "0.75rem",
      "035": "0.875rem",
      "040": "1rem",
      "050": "1.25rem",
      "060": "1.5rem",
      "070": "1.75rem",
      "080": "2rem",
      "090": "2.25rem",
      "100": "2.5rem",
      "110": "2.75rem",
      "120": "3rem",
      "140": "3.5rem",
      "160": "4rem",
      "200": "5rem",
      "240": "6rem",
      "280": "7rem",
      "320": "8rem",
      "360": "9rem",
      "400": "10rem",
      "440": "11rem",
      "480": "12rem",
      "520": "13rem",
      "560": "14rem",
      "600": "15rem",
      "640": "16rem",
      "720": "18rem",
      "800": "20rem",
      "960": "24rem"
    }
  }
}

VS Code settings

{
  "workbench.colorTheme": "poimandres-vue",
  "editor.fontFamily": "'JetBrains Mono', 'Droid Sans Mono', 'monospace', monospace",
  "editor.lineHeight": 2,
  "editor.fontLigatures": true,
  "git.suggestSmartCommit": false,
  "diffEditor.ignoreTrimWhitespace": false,
  "editor.minimap.enabled": false,
  "[vue]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[typescript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "hediet.vscode-drawio.resizeImages": null,
  "editor.matchBrackets": "never",
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[json]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[mdx]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "totalTypeScript.hideAllTips": false,
  "totalTypeScript.hideBasicTips": false,
  "editor.unicodeHighlight.allowedCharacters": {
    " ": true
  },
  // Bracket-pair Highlighting
  "editor.bracketPairColorization.enabled": false,

  // Bracket-pair guides
  "editor.guides.bracketPairsHorizontal": false,
  "editor.guides.highlightActiveBracketPair": false,

  // Indentation guides
  "editor.guides.indentation": false,
  "editor.guides.highlightActiveIndentation": false,
  "totalTypeScript.hiddenTips": [
    "array-type",
    "any-type",
    "typing-function-parameters",
    "interface-declaration",
    "basic-types",
    "optional-object-property",
    "literal-type",
    "ts-object-type",
    "union-type",
    "as-const",
    "as-const-on-object",
    "passing-generics-to-types",
    "type-alias-declaration",
    "function-return-type",
    "non-null-expression",
    "variable-type-annotation",
    "record-utility-type"
  ],
  "[jsonc]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
}

Reproduction URL

Github

Describe your issue

Added preset to tailwind.config.ts, expecting all class in preset will be included in the autcomplete. But, none of the class working, for example, try to type gap- in class attribute in one of the element, and did not see any of the value from preset.

[thecrypticace]

Hey! This is because your preset is invalid. None of your theme values are inside theme and extends should be extend.

Here's a corrected preset:

export default {
  theme: { // I added this
    screens: {
      sm: "640px",
      md: "768px",
      lg: "1024px",
      xl: "1280px",
      "2xl": "1536px",
      mobile: { max: "640px" },
    },
    extend: { // I changed this from `extends` to `extend`
      spacing: {
        "000": "0rem",
        "005": "0.125rem",
        "010": "0.25rem",
        "015": "0.375rem",
        "020": "0.5rem",
        "025": "0.625rem",
        "030": "0.75rem",
        "035": "0.875rem",
        "040": "1rem",
        "050": "1.25rem",
        "060": "1.5rem",
        "070": "1.75rem",
        "080": "2rem",
        "090": "2.25rem",
        100: "2.5rem",
        110: "2.75rem",
        120: "3rem",
        140: "3.5rem",
        160: "4rem",
        200: "5rem",
        240: "6rem",
        280: "7rem",
        320: "8rem",
        360: "9rem",
        400: "10rem",
        440: "11rem",
        480: "12rem",
        520: "13rem",
        560: "14rem",
        600: "15rem",
        640: "16rem",
        720: "18rem",
        800: "20rem",
        960: "24rem",
      },
    },
  }, // I added this
};