Tailwind Converter (Less/CSS to Tailwind CSS)

Tailwind Converter is a new name, the previous name was Less/CSS to Tailwind CSS，Please download Tailwind Converter plugin, Tailwind Converter will continue to be updated.

Description

"Tailwind Converter" is a Visual Studio Code extension that converts LESS/CSS/SCSS/SASS files into Tailwind CSS syntax, providing a streamlined workflow for developers looking to adopt the utility-first CSS framework.

Features

• Seamless Conversion: Easily convert existing LESS/CSS/SCSS/SASS code to Tailwind CSS.
• Integrated Workflow: Perform conversions right within your editor for a smooth development experience.
• Keybinding Support: Quickly trigger conversions with a simple keyboard shortcut.

Installation

To install "Tailwind Converter", follow these steps:

1. Open Visual Studio Code.
2. Press Ctrl+Shift+X or navigate to the Extensions view.
3. Search for "Tailwind Converter".
4. Click on the install button.

Alternatively, you can install it directly from the Visual Studio Code Marketplace.

Usage

After installation, follow these steps to convert your code:

1. Open your .less or .css or .sass or .scss file in VS Code.
2. Select the code snippet you wish to convert. If no text is selected, the entire file will be converted. If it is not a css file, it will be converted into a new file. The suffix of the new file is .converted-tailwind.css. This file is at the same level as the currently converted file.
3. Trigger the conversion by right-clicking and selecting "Convert LESS/CSS/SCSS/SASS to Tailwind CSS" from the context menu or by using the designated keyboard shortcut.

Keyboard Shortcuts

The default keyboard shortcut for converting code is:

• Windows/Linux: Ctrl+Alt+T
• macOS: Ctrl+Cmd+T

To customize the keyboard shortcut:

1. Open the Command Palette with Ctrl+Shift+P.
2. Type "Open Keyboard Shortcuts" and select it.
3. Search for "Convert LESS/CSS/SCSS/SASS to Tailwind CSS".
4. Input your new keybinding.

Activation Events

The extension activates when:

• The command extension.less-css-to-tailwind is executed.
• A file with a language mode of LESS/CSS/SCSS/SASS is being edited.

Requirements

Ensure you have Visual Studio Code version 1.75.0 or later installed to use this extension.

Extension Settings

Include if your extension adds any VS Code settings through the contributes.configuration extension point.

Release Notes

Users appreciate release notes as you update your extension.

0.0.1

• Initial release of "Less/CSS to Tailwind CSS".

0.1.0

• Initial release of "Tailwind Converter". Support more syntax.

Author

Mok - wensszzmmd10844@gmail.com

License

Distributed under the MIT License. See LICENSE for more information.

Support

For support, email wensszzmmd10844@gmail.com or reach out on social media.