Tailwind to CSS (write CSS faster)

Anatole Acqueberge

407 installs

The Tailwind CSS Converter extension for Visual Studio Code provides developers with a seamless workflow for transitioning between Tailwind CSS shorthand and regular CSS. With this extension, you can effortlessly write your styles using Tailwind CSS shorthand notation and convert them into equivalen

Installation

Launch VS Code Quick Open (Ctrl+P), paste the following command, and press enter.

Copied to clipboard

More Info

Tailwind CSS Converter

For developpers used to tailwind shortcuts notation, helping them to write CSS faster.

Demo

Handle specific values with square bracket

Demo2

Tailwind CSS Converter is a Visual Studio Code extension designed to streamline your workflow. It provides convenient features to simplify the conversion of Tailwind CSS shorthand notation to CSS, as well as quick access to a list of available shortcuts.

Features

Convert to CSS: Easily convert Tailwind CSS shorthand notation into corresponding CSS styles within your code.
List of Shortcuts: Quickly access a comprehensive list of available Tailwind CSS shortcuts to enhance your productivity.

Usage

Convert to CSS

Select the text containing Tailwind CSS shorthand notation in your code editor.
Open the Command Palette by pressing Ctrl+Shift+P (Windows/Linux) or Cmd+Shift+P (Mac).
Type "[Tailwind -> CSS] : Convert to CSS".
Press Enter.

You can add a shortcut to this, to be even faster.

Simply add this to your keybindings.json

[
  // Your other shortcuts
  {
    "key": "shift+cmd+r",
    "command": "tailwind-to-css.convertTailwindToCSS"
  }
]

List of Shortcuts

Open the Command Palette by pressing Ctrl+Shift+P (Windows/Linux) or Cmd+Shift+P (Mac).
Type "[Tailwind -> CSS] : All available shortcuts".
Press Enter.

Example

Given the input:

bg-blue-500 p-4 flex

The output will be:

background-color: #3b82f6;
padding: 1rem;
display: flex;

Contributing

Contributions are welcome! If you have any ideas for new features, improvements, or bug fixes, please open an issue or submit a pull request on Gitlab.

License

This extension is licensed under the MIT License.

Enjoy!