How to Configure Prettier + TailwindCSS + Jinja in VSCode

Create .prettierrc.json

    "overrides": [
            "files": "**/*.jinja",
            "options": {
                "parser": "jinja-template"
    "plugins": ["prettier-plugin-jinja-template", "prettier-plugin-tailwindcss"]


Run following command

npm install -D prettier prettier-plugin-tailwindcss prettier-plugin-jinja-template

Ensure VSCode Prettier plugin is installed:

Test formatting works with:

npx prettier --write **/*.jinja

(replace .jinja with .html depending on how you are storing your jinja files)

Open any .jinja file in your project and verify there are two checkmarks next to prettier along the bottom:

Good luck!

Subscribe to Thorne Wolfenbarger - Blog

Don’t miss out on the latest issues. Sign up now to get access to the library of members-only issues.