Tailwind + Twig in the Zed Editor

Block Text

Working with Craft CMS, Twig templates, and Tailwind CSS inside Zed is amazing — once everything works.

Out of the box, Zed doesn’t fully understand Twig, and Tailwind IntelliSense won’t fire inside .twig files.

Here’s the full guide to fixing that — including Twig syntax, Tailwind autocomplete, Emmet, and Prettier formatting.

Zed Extensions

Install these extensions in Zed:

Twig Extension → Syntax highlighting + LSP
👉 Important: Read the README to enable Emmet inside Twig
Emmet → HTML/Twig abbreviation expansion

Block Text

Node modules

To make Prettier format both Twig templates and Tailwind classes correctly, install:

prettier
prettier-plugin-tailwindcss
@zackad/prettier-plugin-twig

Block Code

.prettierrc json

{
  "printWidth": 240,
  "twigSingleQuote": false,
  "twigAlwaysBreakObjects": true,
  "twigMultiTags": [
    "nav,endnav",
    "switch,case,default,endswitch",
    "ifchildren,endifchildren",
    "cache,endcache",
    "js,endjs"
  ],
  "plugins": ["@zackad/prettier-plugin-twig", "prettier-plugin-tailwindcss"]
}

Block Code

zed settings.json json

"format_on_save": "on",
"formatter": "language_server",
"languages": {
    "Twig": {
        "formatter": "prettier",
        "language_servers": [
            "Twig Language Server",
            "emmet-language-server",
            "tailwindcss-language-server"
        ]
    }
    },
    "lsp": {
    "tailwindcss-language-server": {
        "settings": {
        "tailwindCSS": {
            "emmetCompletions": true,
            "includeLanguages": {
            "twig": "html",
            "Twig": "html",
            "*.twig": "html",
            "plaintext": "html"
            },
            "experimental": {
            "classRegex": [
                "class=\"([^\"]*)",
                "class={\"([^\"}]*)",
                "class=format!({\"([^\"}]*)"
            ]
            }
        }
        }
    }
}

Block Text

🎉 Final result

With everything set up:

Tailwind IntelliSense inside Twig
Emmet expansions in Twig
Clean Twig formatting
Auto-sorted Tailwind classes
Full support for Craft CMS workflows

Zed becomes a fast, lightweight dev environment for Craft CMS + Tailwind.