Skip to content

feat: add support for invalid utility class diagnostics#1496

Open
felicijus wants to merge 11 commits into
tailwindlabs:mainfrom
felicijus:feature/invalid-class-check
Open

feat: add support for invalid utility class diagnostics#1496
felicijus wants to merge 11 commits into
tailwindlabs:mainfrom
felicijus:feature/invalid-class-check

Conversation

@felicijus

@felicijus felicijus commented Nov 18, 2025

Copy link
Copy Markdown

Summary

Introduces a new invalidClass diagnostic to flag unrecognized Tailwind utility classes, helping catch typos and invalid utilities.

Changes

  • New Diagnostic: Added InvalidClassDiagnostic type and getInvalidClassDiagnostics function
  • Multi-Mode Support: Works for v4 (via designSystem.compile), JIT (via jit.generateRules), and static modes (via getClassNameDecls)
  • Severity Levels: Added 'info' option alongside 'ignore', 'warning', 'error'
  • Integration: Updated settings, types, and diagnostics provider; leverages existing file watcher for real-time updates

Tests

  • New test cases in folder invalidClass in basic and v4/basic fixtures
  • Tested via packages\tailwindcss-language-server\tests\diagnostics\diagnostics.test.js

Usage

Configure in VSCode settings:

{ "tailwindCSS.lint.invalidClass": "info" }

image

Based on:
#872 (comment)
Linked:
#872

@felicijus felicijus changed the title feat: add support for invalid class diagnostics and update settings feat: add support for invalid class diagnostics Nov 18, 2025
@felicijus felicijus marked this pull request as ready for review November 19, 2025 22:42
@felicijus felicijus changed the title feat: add support for invalid class diagnostics feat: add support for invalid utility class diagnostics Nov 19, 2025
@felicijus felicijus force-pushed the feature/invalid-class-check branch from e371c5e to 9cc237b Compare November 19, 2025 22:53
Comment thread packages/tailwindcss-language-server/tests/diagnostics/diagnostics.test.js Outdated
let index = 0
for (let i = 0; i < parts.length; i++) {
if (i % 2 === 0 && !blocklist.includes(parts[i])) {
if (i % 2 === 0 && parts[i] && parts[i] !== '$' && !blocklist.includes(parts[i])) {

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is a very js-specific thing. It probably doesn't belong here. Not sure where though.

Will need to think about this 🤔

Copy link
Copy Markdown
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Any Ideas ? 😅

Comment thread packages/vscode-tailwindcss/package.json Outdated
@felicijus felicijus force-pushed the feature/invalid-class-check branch 2 times, most recently from f26117c to 14165ef Compare April 21, 2026 21:35
… for invalid classes

- Updated the `isClassValid` function to streamline the validation process for utility classes in Tailwind CSS.
- Removed unnecessary complexity related to design system compilation in version 4.
- Introduced a new test suite for invalid class diagnostics, covering various scenarios including HTML, JSX, CSS, and Vue files.
- Ensured that the tests validate the expected diagnostics for both valid and invalid utility classes.

feat: enhance invalid class diagnostics with comprehensive test cases and refactor test structure

feat: mark unused invalidClass test folder

refactor: simplify class validation logic and add comprehensive tests for invalid classes

- Updated the `isClassValid` function to streamline the validation process for utility classes in Tailwind CSS.
- Removed unnecessary complexity related to design system compilation in version 4.
- Introduced a new test suite for invalid class diagnostics, covering various scenarios including HTML, JSX, CSS, and Vue files.
- Ensured that the tests validate the expected diagnostics for both valid and invalid utility classes.
@felicijus felicijus force-pushed the feature/invalid-class-check branch from 14165ef to 687f6ab Compare April 21, 2026 21:36
@felicijus felicijus requested a review from thecrypticace April 21, 2026 21:37
@felicijus

Copy link
Copy Markdown
Author

@thecrypticace can you please find the time to review this so we can get this merged, I thinks it a valuable addition to the extension.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants