Registry / web-framework / prettier-plugin-latte-tailwindcss

prettier-plugin-latte-tailwindcss

library0.6.0jsnpmunverified

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.

web-framework devops

npm install prettier-plugin-latte-tailwindcss

github ↗package ↗

INSTALL

IMPORT

SIG · PRETTIER-PLUGIN-LA

prettier-plugin-latte-tailwindcss

web-frameworkjavascriptv0.6.0

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

default

✓ plugins: ['prettier-plugin-latte-tailwindcss'] in .prettierrc

✗ import plugin from 'prettier-plugin-latte-tailwindcss'

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

✓ npm install -D prettier-plugin-latte-tailwindcss

✗ npm install prettier-plugin-latte-tailwindcss (missing -D, it's a dev dependency)

Install as a dev dependency. Peer deps prettier and @tailwindcss/node must also be installed.

latte-language

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

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

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

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'">

Debug

Known issues

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

affects: >=0.4.0

breakingPackage 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.

affects: >=0.3.0

deprecatedThe 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.

affects: >=0.1.0

gotchaThe 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).

affects: >=0.1.0

gotchaIf 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').

affects: >=0.1.0

gotchaClasses 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.

affects: >=0.1.0

Errors

Common errors & fixes

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

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.

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

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

fix

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

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

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: Cannot find module '@tailwindcss/node'

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

fix

npm install -D @tailwindcss/node@latest

Upgrade

Version history

0.6.0latest on npm

Audit

Dependencies

prettierrequiredPeer dependency: the plugin runs as a Prettier plugin

@tailwindcss/noderequiredRequired peer dependency since v0.4.0: used for Tailwind class sorting logic

Agent activity

4 hits · last 30 days

node

Resources

githubhttps://github.com/zipper/prettier-plugin-latte-tailwindcss ↗

packagehttps://www.npmjs.com/package/prettier-plugin-latte-tailwindcss ↗