Linting not working from TailwindCSS v4 when using TailwindCSS IntelliSense

I've been using the TailwindCSS IntelliSense VSCode plugin since TailwindCSS v3.

Recently, I created Next.js 15 project using TailwindCSS v4 with create-next-app.

Autocomplete and Hover previews are working by IntelliSense, and IntelliSense is linting some kinds of errors like invalidConfigPath, invalidScreen, emptyRoles from its example: https://github.com/tailwindlabs/tailwindcss-intellisense?tab=readme-ov-file#linting

.example {
  color: theme('colors.redd.50')
}

@screen small {}
@variant group {}

However, the IntelliSense can not linting the wrong TailwindCSS className like

<div className="bg-bule-500"><div>

Is it normally with this? And is there any possible way to find the wrong TailwindCSS className on VSCode editor or CLI prompt? I heard eslint-plugin-tailwindcss only supports TailwindCSS v3, not v4.

./vscode/settings.json

{
  "files.associations": {
    "*.css": "tailwindcss"
  },
  "tailwindCSS.validate": true,
  "tailwindCSS.includeLanguages": {
    "javascript": "javascript",
    "typescript": "typescript",
    "javascriptreact": "javascriptreact",
    "typescriptreact": "typescriptreact"
  },
  "tailwindCSS.experimental.classRegex": [],
  "tailwindCSS.experimental.configFile": "app/globals.css",
  "tailwindCSS.classAttributes": [
    "class",
    "className",
    "ngClass",
    "class:list"
  ],
  "editor.quickSuggestions": {
    "other": "on",
    "comments": "off",
    "strings": "on"
  },
}

/app/globals.css (imported by root layout.tsx)

@import "tailwindcss";

:root {
  --background: #ffffff;
  --foreground: #171717;
}

@theme inline {
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --font-sans: var(--font-geist-sans);
  --font-mono: var(--font-geist-mono);
}

@media (prefers-color-scheme: dark) {
  :root {
    --background: #0a0a0a;
    --foreground: #ededed;
  }
}

body {
  background: var(--background);
  color: var(--foreground);
  font-family: Arial, Helvetica, sans-serif;
}

/postcss.config.mjs

const config = {
  plugins: ['@tailwindcss/postcss'],
};

export default config;

No tailwind.config.ts (useless from v4).

Part of packages.json

{
  "dependencies": {
    "clsx": "^2.1.1",
    "react": "19.1.0",
    "react-awesome-reveal": "^4.3.1",
    "react-dom": "19.1.0",
    "react-hook-form": "^7.58.0",
    "react-icons": "^5.5.0",
    "tailwind-merge": "^3.3.1",
    "tailwindcss-animate": "^1.0.7",
    },
    "devDependencies": {
    "@eslint/eslintrc": "^3.3.1",
    "@next/eslint-plugin-next": "^15.3.3",
    "@tailwindcss/postcss": "^4.1.10",
    "@tailwindcss/typography": "^0.5.16",
    "@types/node": "^22.15.31",
    "@types/react": "19.1.4",
    "@types/react-dom": "19.1.5",
    "@typescript-eslint/eslint-plugin": "^8.34.0",
    "@typescript-eslint/parser": "^8.34.0",
    "eslint": "^9.29.0",
    "eslint-config-next": "^15.3.3",
    "eslint-plugin-next": "^0.0.0",
    "eslint-plugin-react": "^7.37.5",
    "eslint-plugin-react-hooks": "^5.2.0",
    "postcss": "^8.5.5",
    "tailwindcss": "^4.1.10",
    "tw-animate-css": "^1.3.4",
    "typescript": "^5.8.3",
    "typescript-eslint": "^8.34.0"
  },
}

However, the IntelliSense can not linting the wrong TailwindCSS className like:

<div className="bg-bule-500"><div>

Is it normally with this?

The real question is this, and the short answer is yes.

TailwindCSS IntelliSense won't warn you if you've misspelled a class name, but it does help with typing. So if you start typing something like bg-b, a hint box will appear where bg-blue-500 will show up, and you can select it. TailwindCSS IntelliSense can't be certain whether it's a typo or a valid class name - after all, why couldn't you have a class named bg-bule-500?

Classes are not only used for styling, but in the case of the @apply directive, they are used exclusively for that purpose. The @apply directive is specific to TailwindCSS and will generate an error if you specify a class name that TailwindCSS can't recognize - because in that case, it wouldn't be able to apply the styling at the location of the @apply.