Tailwind CSS 4 LSP — Plugin for JetBrains IDEs

A plugin that brings Tailwind CSS autocomplete, hover previews, diagnostics, and color picking to JetBrains IDEs — powered by the official Tailwind CSS Language Server.

Note: JetBrains IDEs ship with a built-in Tailwind CSS plugin. This project is an independent, open-source alternative built as a learning exercise and a foundation for custom extensions.

Features

• Autocomplete — class name suggestions as you type
• Hover previews — see the generated CSS for any Tailwind class
• Diagnostics — highlights errors and conflicts in your markup
• Color picker — gutter icons for arbitrary color values with a built-in color chooser:
  • Hex: bg-[#ff5733], text-[#abc], border-[#aabbcc80]
  • RGB: bg-[rgb(255,87,51)]
  • RGBA: text-[rgba(0,0,0,0.54)]
  • HSL: bg-[hsl(210,50%,40%)]
  • HSLA: bg-[hsla(210,50%,40%,0.8)]
  • Tailwind underscore syntax: bg-[rgba(0_0_0_/_0.5)]
• Settings UI — configurable paths for Node.js and the language server
• Auto-detection — finds the language server in pnpm, npm, and Volta global directories on Windows

Supported IDEs

Any commercial JetBrains IDE version 2023.2 – 2026.1, including:

• PhpStorm
• WebStorm
• IntelliJ IDEA Ultimate
• PyCharm Professional
• RubyMine
• GoLand
• CLion
• RustRover
• DataGrip
• Rider

Compatibility verified with Plugin Verifier across all 9 major versions (2023.2 — 2026.1).

Supported File Types

HTML, CSS, SCSS, Less, JavaScript, TypeScript, JSX, TSX, Vue, PHP, Blade, Twig

Requirements

• Node.js installed and available in PATH
• Tailwind CSS Language Server installed globally:

  # npm
  npm i -g @tailwindcss/language-server
  
  # pnpm
  pnpm add -g @tailwindcss/language-server
  
  # yarn
  yarn global add @tailwindcss/language-server

• A Tailwind CSS project with one of:
  • Tailwind CSS v4: a CSS file containing @import "tailwindcss"
  • Tailwind CSS v3: a tailwind.config.js (or .ts, .cjs, .mjs) file

Installation

From disk (pre-built)

1. Download the latest .zip from Releases
2. In your IDE: Settings → Plugins → ⚙️ → Install Plugin from Disk
3. Select the downloaded ZIP
4. Restart the IDE

Build from source

git clone https://github.com/dasauser/tailwind-css-4-lsp.git
cd tailwind-css-4-lsp
./gradlew buildPlugin

The plugin ZIP will be in build/distributions/.

Configuration

After installation, go to Settings → Languages & Frameworks → CSS → Tailwind CSS 4 LSP:

Setting	Description
Node.js path	Path to the Node.js binary. Leave empty to use PATH.
Language Server path	Path to tailwindcss-language-server. Leave empty for auto-detection.

Development

Prerequisites

• JDK 17
• IntelliJ IDEA (for plugin development)

Run in sandbox

./gradlew runIde

This launches a sandboxed IDE instance with the plugin installed.

Verify compatibility

./gradlew runPluginVerifier

Checks API compatibility across IDE versions 2023.2 – 2026.1.

Warning: Plugin Verifier downloads ~1 GB per IDE version into ~/.cache/pluginVerifier/ides/. Clean up after verification:

# PowerShell
Remove-Item -Recurse -Force "$env:USERPROFILE\.cache\pluginVerifier"

Build

./gradlew buildPlugin

Project Structure

src/main/kotlin/com/tailwind/intellij/
├── lsp/
│   ├── TailwindLspServerSupportProvider.kt  — starts the LSP server
│   └── TailwindLspServerDescriptor.kt       — configures server launch
├── settings/
│   ├── TailwindSettings.kt                  — persistent settings state
│   └── TailwindSettingsConfigurable.kt      — settings UI panel
└── features/
    └── TailwindColorLineMarkerProvider.kt   — color gutter icons + picker

How It Works

The plugin uses the IntelliJ Platform LSP API to communicate with the official Tailwind CSS Language Server over stdio. The platform handles the JSON-RPC transport and maps LSP responses (completions, hover, diagnostics) to native IDE features.

The color picker is implemented as a LineMarkerProvider that scans for Tailwind arbitrary color values (e.g., bg-[#ff5733], text-[rgba(0,0,0,0.54)]) using regex, renders color swatches in the editor gutter, and opens the IDE's built-in color chooser on click.

Contributing

Contributions are welcome! Feel free to open issues and pull requests. See CONTRIBUTING.md for guidelines.

License

MIT

---

This project was developed with assistance from Claude (Anthropic).