# IDE IntelliSense

**SHOULD** · **ID:** `content-intellisense` · **Category:** content
**Source:** [Tailwind](https://tailwindcss.com/docs)
**Interactive version:** https://ui-guides-agent-rules.netlify.app/principles/content-intellisense

> SHOULD: Configure Tailwind CSS IntelliSense extension for autocomplete and invalid class linting

Configure IDE extension for autocomplete and linting

The official Tailwind CSS IntelliSense extension provides autocomplete, syntax highlighting, and linting. It catches errors like non-existent classes and suggests valid utilities.

## Bad — do not do this

`content-intellisense-bad`

```tsx
export function IntellisenseBad() {
  // BAD: Code written without Tailwind IntelliSense - contains typos and invalid classes
  // These classes won't work but there's no warning without IntelliSense
  return (
    <div className="w-full max-w-md space-y-4">
      <div className="bg-card border border-border rounded-lg p-4">
        <h4 className="font-medium mb-3">Code With Typos (No IntelliSense)</h4>
        <div className="space-y-4">
          {/* BAD: Intentional typos that IntelliSense would catch */}
          <div className="p-3 bg-muted rounded-lg">
            <h5 className="text-sm font-medium mb-2">Typo in Color</h5>
            <div className="bg-background rounded p-2 text-xs font-mono">
              <code className="text-error line-through">bg-primry</code>
              <span className="text-muted-foreground ml-2">(should be bg-primary)</span>
            </div>
          </div>
          <div className="p-3 bg-muted rounded-lg">
            <h5 className="text-sm font-medium mb-2">Invalid Spacing Value</h5>
            <div className="bg-background rounded p-2 text-xs font-mono">
              <code className="text-error line-through">p-7</code>
              <span className="text-muted-foreground ml-2">(not in default scale)</span>
            </div>
          </div>
          <div className="p-3 bg-muted rounded-lg">
            <h5 className="text-sm font-medium mb-2">Made-up Class</h5>
            <div className="bg-background rounded p-2 text-xs font-mono">
              <code className="text-error line-through">text-semibold</code>
              <span className="text-muted-foreground ml-2">(should be font-semibold)</span>
            </div>
          </div>
          <div className="p-3 bg-muted rounded-lg">
            <h5 className="text-sm font-medium mb-2">Wrong Syntax</h5>
            <div className="bg-background rounded p-2 text-xs font-mono">
              <code className="text-error line-through">hover-bg-blue-500</code>
              <span className="text-muted-foreground ml-2">(should be hover:bg-blue-500)</span>
            </div>
          </div>
        </div>
      </div>
      <p className="text-xs text-error">
        Without IntelliSense, typos silently fail - no autocomplete or validation
      </p>
    </div>
  );
}
```

## Good — do this

`content-intellisense-good`

```tsx
export function IntellisenseGood() {
  return (
    <div className="w-full max-w-md space-y-4">
      <div className="bg-card border border-border rounded-lg p-4">
        <h4 className="font-medium mb-3">With IntelliSense</h4>
        <div className="space-y-4">
          <div className="p-3 bg-muted rounded-lg">
            <h5 className="text-sm font-medium mb-2">Autocomplete</h5>
            <div className="bg-background rounded p-2 text-xs font-mono">
              <span className="text-muted-foreground">className="</span>
              <span className="text-primary">bg-</span>
              <span className="text-muted-foreground">|"</span>
              <div className="mt-2 border border-border rounded p-2 space-y-1">
                <div className="flex items-center gap-2">
                  <span className="w-3 h-3 rounded bg-primary" />
                  <span>bg-primary</span>
                </div>
                <div className="flex items-center gap-2">
                  <span className="w-3 h-3 rounded bg-secondary" />
                  <span>bg-secondary</span>
                </div>
                <div className="flex items-center gap-2">
                  <span className="w-3 h-3 rounded bg-muted" />
                  <span>bg-muted</span>
                </div>
              </div>
            </div>
          </div>
          <div className="p-3 bg-muted rounded-lg">
            <h5 className="text-sm font-medium mb-2">Hover Preview</h5>
            <div className="bg-background rounded p-2 text-xs font-mono">
              <code>p-4</code>
              <span className="text-muted-foreground"> → padding: 1rem;</span>
            </div>
          </div>
          <div className="p-3 bg-muted rounded-lg">
            <h5 className="text-sm font-medium mb-2">Error Detection</h5>
            <div className="bg-background rounded p-2 text-xs font-mono">
              <span className="underline decoration-wavy decoration-error">bg-primar</span>
              <span className="text-error ml-2">Unknown class</span>
            </div>
          </div>
        </div>
      </div>
      <p className="text-xs text-success">
        IntelliSense catches errors and boosts productivity
      </p>
    </div>
  );
}
```

## References

- [IntelliSense Extension](https://tailwindcss.com/docs/editor-setup#intelli-sense-for-vs-code)
- [Tailwind CSS IntelliSense](https://github.com/tailwindlabs/tailwindcss-intellisense)