Twindow
Detect duplicate Tailwind CSS class combinations across your project.
Features
🔍 Project-wide Scan
Scan your entire project for duplicate Tailwind class combinations with a single click.
🔄 Auto Re-scan on Save
Automatically re-scans the current file whenever you save, keeping results up to date.
View all duplicate groups in the Explorer sidebar. Click any result to jump directly to that line.
💡 Copy as @apply
Place your cursor on any class string and use the lightbulb (💡) action to copy it as a @apply rule.
@apply flex items-center gap-2 text-sm font-bold;
⚙️ Three Detection Modes
| Mode |
Description |
exact |
Identical string including order |
set |
Same set of classes regardless of order |
partial |
Overlapping above a similarity threshold |
Quickly filter results by minimum occurrence count directly from the sidebar.
Supported Syntax
| Syntax |
Example |
JSX className |
className="flex items-center" |
| JSX template literal |
className={`flex items-center`} |
Vue / HTML class |
class="flex items-center" |
cn() / clsx() |
cn("flex items-center", "gap-2") |
tw tagged template |
tw`flex items-center` |
Dynamic classes (cn('flex', isActive && 'text-blue')) are not detected.
Settings
| Setting |
Default |
Description |
twindow.detectionMode |
set |
Detection mode: exact, set, partial |
twindow.minClassCount |
2 |
Minimum number of classes to detect |
twindow.minOccurrenceCount |
2 |
Minimum occurrences to show in results |
twindow.partialThreshold |
0.8 |
Jaccard similarity threshold for partial mode |
twindow.autoScanOnSave |
true |
Auto re-scan on file save |
twindow.includePatterns |
**/*.{tsx,jsx,vue,html,ts,js} |
Files to scan |
twindow.excludePatterns |
**/node_modules/** |
Files to exclude |
Usage
- Open the Explorer panel in VSCode
- Find the Twindow Duplicates section at the bottom
- Click 🔍 to scan the project
- Click any result to jump to that location
- Use the filter toggle to adjust minimum occurrence count
Release Notes
0.0.1
Initial release.
| |
