Tailwind Eye

A WebStorm extension that provides a visual fading or folding effect for code. It can toggle between fading non-styling code (to focus on Tailwind classes) and folding the content of className strings.

Demo

Fold and Dim

Edit multiline

Off

Motivation

To reduce visual noise and focus on what matters, whether it's the structure of your HTML/JSX or the Tailwind styling itself.

Use the shortcut Shift + Alt + F to toggle between the two modes:

• Fade non-styling code: Fades everything except className attributes.
• Fold className content: Folds the actual Tailwind utility strings.

Cmd+Shift+I toggles inline<->multiline classNames

Installation

• Using the IDE built-in plugin system:

  Settings/Preferences > Plugins > Marketplace > Search for "tw-eye-tmp" > Install

• Using JetBrains Marketplace:

  Go to JetBrains Marketplace and install it by clicking the Install to ... button in case your IDE is running.

  You can also download the latest release from JetBrains Marketplace and install it manually using Settings/Preferences > Plugins > ⚙️ > Install plugin from disk...

• Manually:

  Download the latest release and install it manually using Settings/Preferences > Plugins > ⚙️ > Install plugin from disk...

Plugin based on the IntelliJ Platform Plugin Template.

---

How to Build and Install

1. Build the Plugin

This project uses Gradle. To compile the plugin and create an installable distribution, run:

./gradlew buildPlugin

The resulting ZIP file will be located in: build/distributions/tailwind-eye-1.0-SNAPSHOT.zip

2. Install in your IDE

To install the plugin in your personal IDE (not the sandbox):

1. Open your IDE (WebStorm, IntelliJ IDEA, etc.).
2. Go to Settings (or Preferences on macOS) > Plugins.
3. Click the cog icon (⚙️) and select Install Plugin from Disk....
4. Navigate to the build/distributions/ folder and select the ZIP file.
5. Restart the IDE if prompted.

Development

To run a development instance of the IDE with the plugin pre-installed:

./gradlew runIde