Chapter 5: Editor Setup

Core Idea

Tailwind's custom CSS syntax (@theme, @variant, @source, etc.) needs editor tooling to avoid false lint errors and to get autocomplete/hover previews — the official IntelliSense extension covers VS Code, Cursor, and JetBrains IDEs, with built-in support in Zed.

Key Concepts

• Custom at-rules can trip native CSS linting: @theme/@variant/@source aren't standard CSS, so strict editors may flag them — the fix is installing Tailwind-aware tooling rather than disabling the rules blindly (only disable native CSS validation if the editor has no Tailwind-specific mode at all).
• Tailwind CSS IntelliSense (VS Code): official extension providing autocomplete for utility classes and for CSS functions/directives, linting for errors/potential bugs in CSS and markup, hover previews showing the full generated CSS for a class, and correct syntax highlighting for Tailwind's custom at-rules.
• Cursor: since it's VS Code-extension-compatible, the same IntelliSense extension and Prettier plugin work without extra setup.
• Zed: has Tailwind CSS autocomplete/linting/hover-preview built in natively, no extension install required, and integrates with the official Prettier plugin.
• JetBrains IDEs (WebStorm, PhpStorm, etc.): have built-in intelligent Tailwind completions in HTML.
• Prettier plugin for class sorting: official plugin that automatically reorders classes in a recommended order (e.g. reordering text-white px-4 sm:px-8 py-2 sm:py-3 bg-sky-700 hover:bg-sky-800 into a consistent canonical order) — works anywhere Prettier runs (editor, CI, CLI), independent of which editor extension is used.

Reference Tables

Editor	Tailwind support
VS Code	Official "Tailwind CSS IntelliSense" extension (autocomplete, lint, hover preview, syntax highlighting)
Cursor	Same VS Code extension works out of the box (VS Code-extension compatible)
Zed	Built-in, no extension needed
JetBrains (WebStorm, PhpStorm, ...)	Built-in intelligent completions
Any (via Prettier)	Official prettier-plugin-tailwindcss sorts classes into recommended order

Key Takeaways

1. Install the official IntelliSense extension (or rely on Zed/JetBrains' built-in support) before assuming a "CSS error" on @theme/@variant/@source is real — it's usually just the editor not recognizing Tailwind's syntax.
2. The class-sorting Prettier plugin is editor-agnostic — it's worth adding even in editors with no dedicated Tailwind extension.

Connects To

• Adding Custom Styles: the at-rules this tooling supports (@theme, @utility, @custom-variant, @variant) are documented there.
• Detecting Classes in Source Files: @source syntax highlighting/autocomplete depends on the same IntelliSense tooling.