Classnames Converter

English

Introduction

Classnames Converter is a VS Code extension designed to assist developers in migrating React projects from CSS Modules to Tailwind CSS (or mixing both).

It simplifies the process of wrapping class strings with the classnames library, allowing you to easily combine static Tailwind classes with dynamic CSS Module classes.

Features

• 🔄 One-Command Conversion: Convert className="..." to className={classNames("...")} instantly.
• 📦 Auto Import: Automatically detects if classnames is imported. If not, it adds import classNames from 'classnames' to the top of your file.
• 🎯 Migration Ready: Perfect for projects introducing Tailwind CSS into an existing CSS Modules architecture.

Usage

1. Open a React file (.tsx or .jsx).

2. Select the className attribute or place your cursor on it.

   // Before
   <div className="container flex-row"></div>
   

3. Open the Command Palette (Ctrl+Shift+P / Cmd+Shift+P).

4. Search and select Classnames Converter: Convert to ClassNames (Command ID: classnames-converter.convertToClassNames).

5. The code will be transformed, and the import will be added if missing.

   // After
   import classNames from 'classnames';
   
   // ...
   <div className={classNames('container flex-row')}></div>;
   

Commands

Requirements

• Make sure the classnames package is installed in your project:

  npm install classnames
  # or
  yarn add classnames
  

中文

简介

Classnames Converter 是一款 VS Code 插件，旨在帮助开发者将 React 项目从 CSS Modules 迁移到 Tailwind CSS（或混合使用两者）。

它简化了使用 classnames 库包裹类名字符串的过程，让您可以轻松地将静态 Tailwind 类与动态 CSS Module 类结合起来。

功能特性

• 🔄 一键转换：瞬间将 className="..." 转换为 className={classNames("...")}。
• 📦 自动导入：自动检测是否已导入 classnames。如果没有，它会自动在文件顶部添加 import classNames from 'classnames'。
• 🎯 迁移就绪：非常适合在现有的 CSS Modules 架构中引入 Tailwind CSS 的项目。

使用方法

1. 打开一个 React 文件 (.tsx 或 .jsx)。

2. 选中 className 属性或将光标放在该属性上。

   // 转换前
   <div className="container flex-row"></div>
   

3. 打开命令面板 (Ctrl+Shift+P / Cmd+Shift+P)。

4. 搜索并选择 Classnames Converter: Convert to ClassNames (命令 ID: classnames-converter.convertToClassNames)。

5. 代码将被转换，如果缺少导入语句，插件会自动添加。

   // 转换后
   import classNames from 'classnames';
   
   // ...
   <div className={classNames('container flex-row')}></div>;
   

命令列表

前置要求

• 请确保您的项目中已安装 classnames 包：

  npm install classnames
  # 或
  yarn add classnames
  

License

MIT License © 2026 Kevin Law

Links

• Repository
• Issues
• Marketplace