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:
- Open Visual Studio Code.
- Press
Ctrl+Shift+X
or navigate to the Extensions view.
- Search for "Tailwind Converter".
- 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:
- Open your
.less
or .css
or .sass
or .scss
file in VS Code.
- 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.
- 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:
- Open the Command Palette with
Ctrl+Shift+P
.
- Type "Open Keyboard Shortcuts" and select it.
- Search for "Convert LESS/CSS/SCSS/SASS to Tailwind CSS".
- 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.