Format Twig File with Tailwind Utility Class via Prettier

TLDR;

Install prettier npm packages and plugins:

1
2
3
4

npm install -D prettier \
               prettier-plugin-tailwindcss \
               @ttskch/prettier-plugin-tailwindcss-anywhere \
               @zackad/prettier-plugin-twig

Create prettier configuration file for “twig formatting” & “tailwind utility classes ordering”:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12

//.prettierrc-twig
{
    "semi": true,
    "singleQuote": true,
    "tabWidth": 4,
    "bracketSameLine": true,
    "trailingComma": "all",
    "useTabs": false,
    "plugins": [
        "@zackad/prettier-plugin-twig"
    ]
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17

//.prettier-tailwind
{
    "tailwindStylesheet": "./src/css/tailwind-css-input.css",
    "plugins": [
        "@zackad/prettier-plugin-twig",
        "prettier-plugin-tailwindcss",
        "@ttskch/prettier-plugin-tailwindcss-anywhere"
    ],
   "overrides": [
      {
       "files": "*.twig",
          "options": {
              "parser": "anywhere"
          }
      }
   ]
}

Add the formatting command as npm scripts for convinient of access:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17

{
    "name": "radix_papermod_blog",
    "description": "A custom Radix subtheme, based on Bootstrap 5.",
    "private": true,
    "engines": {
        "npm": ">=6.0",
        "node": ">=16.0",
        "yarn": ">=1.6"
    },
    "license": "MIT",
    "scripts": {
		"dev": "mix",
		"watch": "mix watch",
+       "format-twig": "prettier --config .prettierrc-twig --write **/*.twig",
+       "format-tailwind": "prettier --config .prettierrc-tawilind --write **/*.twig",
+       "format-all": "prettier --config .prettierrc-twig --write **/*.twig && prettier --config .prettierrc-tailwind --write **/*.twig",
        ...

Format using npm run format-all command we just added:

Exclude files if necessary, through .prettierignore file:

1
2
3
4
5

components/html/html.twig
components/page-content/page-content.twig
templates/system/container.html.twig
templates/navigation/links.html.twig
templates/dataset/item-list.html.twig

Use Prettier to Format Twig File

Till this date (2025-09-09) Prettier still doesn’t work natively with twig files (with *.twig or *.html.twig suffix).

Even after installing prettier with node package manager and the VSCode extension, and configure Prettier as the default formatter for twig files, you will still see warning that says: Configure Default Formatter Extension 'Prettier - Code formatter' is configured as formatter but it cannot format 'HTML (Twig)'-files.

Configuration did beforehand the blow example:

Example formattting *.html file:

Example formatting *.twig file that yeild warning/error:

In order to use Prettier to format twig file, we will need to introduce the “@zackad/prettier-plugin-twig” plugin, you’ll need to first install as the development dependency, and add it in the .prettierrc plugin parameter:

1
2
3
4
5
6
7

> npm install --save-dev @zackad/prettier-plugin-twig

up to date, audited 975 packages in 1s
3 moderate severity vulnerabilities
Some issues need review, and may require choosing
a different dependency.
Run `npm audit` for details.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12

//.prettierrc
{
+ "plugins": [
+        "@zackad/prettier-plugin-twig",
+  ],
  "semi": true,
  "singleQuote": true,
  "tabWidth": 2,
  "trailingComma": "all",
  "useTabs": false,
  ...
}

Then reload the VSCode window either via reopening or the “Developer: Reload Window” command, and re-try formatting the example.twig file using “Format Document” command

(*sometimes if the “Format Document” command does not work, you can try the “Format Document (Forced)” command

Use Prettier to Sort Tailwind Classnames

Tailwind utility classes can can overwhelming when there are tens of them in one HTML component. With theprettier-plugin-tailwindcss plugin, prettier could help sorting thes eytilities classes into tailwind’s recommended orders such that: classname orders are consistent throughout the codebase, the orders are more predictable (hence faster scanning for developers to stop the missing/extra utilities), reduce merge conflict during pull request.

Below are a list of ordering rules applied by the plug-in (according to ChatGPT):

• Group by category: Tailwind utility classes are ordered by their functional category (e.g., layout, flex/grid, spacing, sizing, typography, color, effects, others).
• Default ordering: Within each group, classes are sorted in a stable, deterministic order, often alphabetical or by a predefined internal order.
• Responsiveness and state variants: Variants (e.g., md:, lg:, hover:) are grouped and ordered consistently, often with the base class, followed by responsive variants in increasing breakpoint order, followed by state variants.

To use it for *.html document you simply have to install it via npm install -D prettier prettier-plugin-tailwindcss, and add it to the .prettierrc file’s plugin:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13

//.prettierrc
{
+ "plugins": [
+        "prettier-plugin-tailwindcss"
+  ],
+ "tailwindStylesheet": "./src/css/tailwind-css-input.css",
  "semi": true,
  "singleQuote": true,
  "tabWidth": 2,
  "trailingComma": "all",
  "useTabs": false,
  ...
}

However, the same formatting does not work on *.twig files . This is still true even with the @zackad/prettier-plugin-twig plugin, the formattting of prettier will work, but the ordering of class name is not included:

In order to have auto sorting of utility classes in twig, we’ll need to use the “ttskch / prettier-plugin-tailwindcss-anywhere” plugin, simply install it with npm via:

1
2
3

npm install -D prettier \
               prettier-plugin-tailwindcss \
               @ttskch/prettier-plugin-tailwindcss-anywhere

and modify the .prettierrc file accordinly to use it as the parser:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22

{
    "semi": true,
    "singleQuote": true,
    "tabWidth": 4,
    "bracketSameLine": true,
    "trailingComma": "all",
    "useTabs": false,
    "tailwindStylesheet": "./src/css/tailwind-css-input.css",
    "plugins": [
        "@zackad/prettier-plugin-twig",
        "prettier-plugin-tailwindcss",
+       "@ttskch/prettier-plugin-tailwindcss-anywhere"
    ],
+   "overrides": [
+      {
+       "files": "*.twig",
+          "options": {
+              "parser": "anywhere"
+          }
+      }
+   ]
}

Reload the VSCode window and retry formatting:

But please be aware that by default zackad/prettier-plugin-twig uses twig as the parser, so by setting the parser to anywhere, you looses some powers for format. For instance the tab alignment is no longer working in the below example:

To resolve this, I found a work around that is to format twice using two different configuration file:

1
2
3
4
5

> prettier --config .prettierrc-twig --write a-example.twig
a-example.twig 6ms

> prettier --config .prettierrc-tailwind --write a-example.twig
a-example.twig 26ms

(configuration files: .prettierrc-twig, .prettierrc-tailwind, the order MUST be prettierrc-twig first, then prettierrc-tailwind second)

Potentially you could save this as a npm script:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17

{
    "name": "radix_papermod_blog",
    "description": "A custom Radix subtheme, based on Bootstrap 5.",
    "private": true,
    "engines": {
        "npm": ">=6.0",
        "node": ">=16.0",
        "yarn": ">=1.6"
    },
    "license": "MIT",
    "scripts": {
		"dev": "mix",
		"watch": "mix watch",
+       "format-twig": "prettier --config .prettierrc-twig --write **/*.twig",
+       "format-tailwind": "prettier --config .prettierrc-tawilind --write **/*.twig",
+       "format-all": "prettier --config .prettierrc-twig --write **/*.twig && prettier --config .prettierrc-tailwind --write **/*.twig",
        ...

If some default files that comes with Drupal happen to throw error such as: Unexpected closing "div" tag. Seems like your DOM is out of control., you can put those in the .prettierignore file to surpress them:

1
2
3
4
5
6

//.prettierignore
components/html/html.twig
components/page-content/page-content.twig
templates/system/container.html.twig
templates/navigation/links.html.twig
templates/dataset/item-list.html.twig

Reference

• CodeKnight: Using Prettier with Twig in VS Code

  • Explains how to use prettier to format twig file

• GitHub Issue: Prettier Plugin - How to make it work for Twig files? (#11731)

  • Explains how to use prettier to sort tailwind classnames in twig file

• Prettier Plugin - For Formatting Twig File

  • zackad/prettier-plugin-twig
    • This Plugin enables Prettier to format .twig files, as well as .html.twig.
    • forked from “trivago/prettier-plugin-twig-melody” (which is super outdated and only worked for prettier 2.X versions)
    • zackad/prettier-plugin-twig focus on twig template only, work for the prettier 3.X versions.
  • (DO NOT USE !!!!) trivago/prettier-plugin-twig-melody
    • works only for prettier 2.X versions
    • at year 2025, this repo have not been updated in the past 5~6 years

• Prettier Plugin - For Sorting Tailwind Class in Twig File

  • tailwindlabs/prettier-plugin-tailwindcss

    • A Prettier v3+ plugin for Tailwind CSS v3.0+ that automatically sorts classes based on our recommended class order.
    • See more on this official blog post: Automatic Class Sorting with Prettier

  • ttskch/prettier-plugin-tailwindcss-anywhere

    • A Prettier plugin for sorting TailwindCSS classes in any HTML-like language, like Twig etc⚡

    • It is dependent on the official “tailwindlabs/prettier-plugin-tailwindcss” plugin, that is to say, the “anywhere” plugin have to come after the “tailwindcss” plugin, below is an exmaple of such .prettierrc file:

      1	"plugins": ["prettier-plugin-tailwindcss", "@ttskch/prettier-plugin-tailwindcss-anywhere"],