Executando TailwindCSS durante debugging no VSCode

Problema

Ao desenvolver projetos Django (ou outros frameworks) com TailwindCSS, é necessário manter o compilador do Tailwind rodando em modo --watch para que as alterações nos estilos sejam processadas automaticamente.

Solução

Configurar o VSCode para iniciar automaticamente o TailwindCSS como uma task de background sempre que o debugger for executado, usando preLaunchTask.

Vamos aos passos necessários.

Criar a Task do TailwindCSS

Edite o arquivo .vscode/tasks.json e adicione a seguinte task, ajustando o caminho dos arquivos de entrada e saída conforme necessário na linha command:

{
    "label": "Tailwind",
    "type": "shell",
    "command": "npx @tailwindcss/cli -i ${workspaceFolder}\\src\\css\\_base.css -o ${workspaceFolder}\\src\\css\\base.css --watch",
    "isBackground": true,
    "runOptions": {
        "instanceLimit": 1
    },
    "presentation": {
        "group": "watchers"
    },
    "problemMatcher": {
        "pattern": {
            "regexp": "^.*$",
            "file": 0,
            "location": 1,
            "message": 2
        },
        "background": {
            "activeOnStart": true,
            "beginsPattern": ".",
            "endsPattern": "Done in"
        }
    }
}

Configurar o Launch para Usar a Task

Edite o arquivo .vscode/launch.json e adicione preLaunchTask à sua configuração:

{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Django",
            "type": "debugpy",
            "request": "launch",
            "args": ["runserver"],
            "django": true,
            "autoStartBrowser": false,
            "program": "${workspaceFolder}\\esocial2excel\\manage.py",
            "preLaunchTask": "Tailwind"
        }
    ]
}

Resultado

Pronto, ao iniciar o debugger no VSCode, a task do TailwindCSS será executada em segundo plano, mantendo o processo de compilação ativo enquanto você desenvolve 🚀!