VS Code plugin for compiling Tailwind

[ivangretsky]

Good day!

We are developing in a rather old-fashioned way (but maybe it experiences sort of a renaissance nowadays) without a build chain with webpack or gulp. We still have scss compilation, but we handle it with a VS Code addon, that abstracts the compilation step away - we just need to install it and run. It is especially handy when working on a remote with VS Code Remote Development, as we do not need to install node there or anything like that. Just run.

I think it would be super useful to have this kind of addon for Tailwind too. Maybe a generic PostCSS plugin will do too. It would add to Tailwind's infrastructure making it more approachable. Please consider the idea)

P.S. If there is already a way to do something like that, please give us a hint how to do it.

[sntran]

At work I am experimenting with a VS Code extension to preview a HTML page built with Tailwind. In order to be able to use the extension on web environments like github.dev and vscode.dev, I can not "compile" tailwind with PostCSS. Instead, I utilize the Play CDN version to "compile" Tailwind on the fly, inside a WebView. This works well, but it has certain limitations, such as limited custom plugin support, limited custom CSS (have to inline into the HTML)...

[ivangretsky]

I have ended up installing Tailwind Standalone CLI and adding a task to use it.

Here is an example tasks.json file content for this:

{
	"version": "2.0.0",
	"tasks": [
		{
			"label": "Compile Tailwind CSS | Watch",
			"type": "shell",
			"command": "./tailwindcss -i tailwind.css -o ../css/tailwind.css --watch",
			"options": {
				"cwd": "${workspaceFolder}/PATH_TO_TAILWIND_CLI/"
			},
			"presentation": {
				"panel": "shared",
				"showReuseMessage": false
			},
			"group": {
				"kind": "none"
			},
			"problemMatcher": []
		}
	]
}