prettier-plugin-latte-tailwindcss

0.6.0 verified Sat Apr 25 auth: no javascript

A Prettier plugin for sorting Tailwind CSS v4 classes in Latte v3 templates (Nette framework). Current stable version is 0.6.0, released March 2025. It fills the gap left by the official prettier-plugin-tailwindcss which does not support Latte. Key differentiators: handles n:class, class={[...]} Latte array syntax, custom classRegex for {embed}/{include} parameters, and a barrier model for n:class whitespace. Ships TypeScript types. Requires prettier >=3.0.0 and @tailwindcss/node >=4.0.0. Options include tailwindStylesheet, tailwindClassOrder (bucket-based ordering introduced in 0.6.0), tailwindPropertyOrder, and tailwindPreserveWhitespace. Active development with regular releases.

Common errors

error Module not found: Error: Can't resolve 'prettier-plugin-latte-tailwindcss' ↓

cause The package is not installed or is a global install without proper resolve.

fix

Run: npm install -D prettier-plugin-latte-tailwindcss (in your project directory). Ensure your working directory contains node_modules.

error TypeError: Cannot read properties of undefined (reading 'tailwindConfig') ↓

cause Missing @tailwindcss/node peer dependency; plugin cannot access Tailwind config.

fix

Install: npm install -D @tailwindcss/node@>=4.0.0

error Error: No parser could be inferred for file: template.latte ↓

cause Prettier doesn't recognize .latte files; the 'latte' parser must be explicitly set via overrides.

fix

Add to .prettierrc: overrides: { files: '*.latte', options: { parser: 'latte' } }

error Error: Cannot find module '@tailwindcss/node' ↓

cause @tailwindcss/node is not installed (required since v0.4.0).

fix

npm install -D @tailwindcss/node@latest

Warnings

breaking @tailwindcss/node is now a required peer dependency (since v0.4.0). The plugin will not sort classes without it. ↓

fix Run: npm install -D @tailwindcss/node@latest

breaking Package renamed from 'prettier-plugin-latte-tailwind' to 'prettier-plugin-latte-tailwindcss' in v0.3.0. Existing installations will not update automatically. ↓

fix Uninstall old package: npm uninstall prettier-plugin-latte-tailwind, then install new: npm install -D prettier-plugin-latte-tailwindcss. Update .prettierrc plugins array.

deprecated The option 'tailwindNclassWhitespace' with value 'normalize-barriers' is the default. Setting it explicitly is unnecessary but not deprecated. ↓

fix No fix needed; you can remove the option from config if you're using the default.

gotcha The plugin requires Node.js >=20.19. Older Node versions will fail to load the plugin. ↓

fix Upgrade Node.js to v20.19 or later (or use nvm to switch).

gotcha If you omit 'tailwindStylesheet', the plugin uses a default @import "tailwindcss" which may reorder classes differently than your custom setup. ↓

fix Set tailwindStylesheet to your project's CSS entry point (e.g., './resources/css/app.css').

gotcha Classes inside PHP concatenation expressions like 'icon--' . $icon['icon'] are treated as barrier tokens and not sorted individually. ↓

fix Use separate string literals or single classes in n:class arrays to get them sorted.

Install

npm install prettier-plugin-latte-tailwindcss

yarn add prettier-plugin-latte-tailwindcss

pnpm add prettier-plugin-latte-tailwindcss

Imports

default
wrong
```
import plugin from 'prettier-plugin-latte-tailwindcss'
```
correct
```
plugins: ['prettier-plugin-latte-tailwindcss'] in .prettierrc
```
This is a Prettier plugin, not a JavaScript library. You don't import it in code; you add it to your Prettier config's plugins array.
prettier-plugin-latte-tailwindcss
wrong
```
npm install prettier-plugin-latte-tailwindcss (missing -D, it's a dev dependency)
```
correct
```
npm install -D prettier-plugin-latte-tailwindcss
```
Install as a dev dependency. Peer deps prettier and @tailwindcss/node must also be installed.

latte-language

wrong

overrides: { files: '*.latte', options: { parser: 'html' } }

correct

overrides: { files: '*.latte', options: { parser: 'latte' } } in .prettierrc

The plugin registers a 'latte' parser. Do NOT use parser: 'html' or the plugin won't activate.

Quickstart

Minimal .prettierrc config to enable sorting Tailwind classes in Latte templates, with install command and before/after example.

// .prettierrc
{
  "plugins": ["prettier-plugin-latte-tailwindcss"],
  "tailwindStylesheet": "./resources/css/app.css",
  "overrides": [
    {
      "files": "*.latte",
      "options": {
        "parser": "latte"
      }
    }
  ]
}

// Install
// npm install -D prettier prettier-plugin-latte-tailwindcss @tailwindcss/node

// Then run: npx prettier --write "**/*.latte"

// Example Latte file before sort:
// <div class="mt-4 flex text-left items-center">
// <div n:class="'mt-4', 'flex', $active ? 'font-bold', 'text-sm', 'items-center'">

// After sort:
// <div class="flex items-center text-left mt-4">
// <div n:class="'flex', 'mt-4', $active ? 'font-bold', 'items-center', 'text-sm'">