LukasBombach / vscode-css-to-tailwindcss

CSS to TailwindCSS 3.x converter extension for Visual Studio Code

CSS to TailwindCSS converter (VS Code extension)

🔗 NPM Package

🔄 Convert your CSS to TailwindCSS considering workspace tailwind configuration in a few clicks.

You can even convert simple JS objects!:

Features:

• supports all (or almost all) the features currently available in TailwindCSS
• supports nested sass-like syntax
• automatically finds tailwind config in your workspace and uses it for conversion (it is possible to configure config file path)
• colors are matched regardless of the format used
• rem is converted to px (it is possible to configure the rem size)
• non-convertible CSS declarations are simply skipped
• ambiguities when using css variables are resolved automatically

Installation

Install via the Visual Studio Code Marketplace →

The extension finds the first Tailwind config file named tailwind.config.js or tailwind.config.cjs in your workspace and uses it when converting CSS. Use tailwindCSS.experimental.configFile setting to manually specify the config file(s) yourself instead.

Usage

1. Select the CSS you want to convert to TailwindCSS
2. Open command pallete (Mac: Shift+Cmd+P; Windows: Shift+Ctrl+P)
3. Run "Convert CSS to TailwindCSS" command

For more convenience, you can also assign a keyboard shortcut to the "Convert CSS to TailwindCSS" command.

Extension Settings

To avoid duplicate settings, this extension uses the Tailwind CSS IntelliSense settings

cssToTailwindCss.arbitraryProperties

Default: false

Defines whether non-convertible properties should be converted as arbitrary properties.

tailwindCSS.rootFontSize

Default: 16

Root font size in pixels. Used to convert rem CSS values to their px equivalents.

tailwindCSS.experimental.configFile

Default: null

By default the extension will automatically use the first tailwind.config.js or tailwind.config.cjs file in your workspace that it can find to provide CSS to TailwindCSS converting. Use this setting to manually specify the config file(s) yourself instead.

Example:

"tailwindCSS.experimental.configFile": ".config/tailwind.config.js"

Release Notes

1.2.6

• Fix: flex property should convert considering the default values for flexShrink and flexBasis

1.2.5

• Fix: temporary id is replaced with & only once

1.2.3

• Fix missing declarations when converting CSSinJS

1.2.2

• Fix fallback TailwindConverter

1.2.1

• Fix incorrect conversion of border declaration

1.2.0

• Update css-to-tailwindcss package to stable v1
• Change extension namespace from css-to-tailwindcss to cssToTailwindCss
• Add cssToTailwindCss.arbitraryProperties configuration

1.1.1

• Fix: media expression is not converted if it has no screen parameters

1.1.0

• Add CSS-in-JS support
• Fix output CSS formatting

1.0.0

• Initial release