prettier-plugin-latte-tailwindcss weekly downloads statistics

prettier-plugin-latte-tailwindcss

A Prettier plugin that sorts Tailwind CSS v4 classes in Latte v3 templates.

The official prettier-plugin-tailwindcss does not support Latte. This plugin fills that gap — it handles class, n:class, class={[...]}, and custom locations via classRegex.

Installation

Peer dependencies: prettier >= 3.0.0 and @tailwindcss/node >= 4.0.0.

Minimal .prettierrc:

If you omit tailwindStylesheet, the plugin uses a default @import "tailwindcss" which gives standard Tailwind class order. Set it when you have custom utilities or theme customizations.

What gets sorted

Standard HTML attributes

class and n:class attributes are always sorted automatically.

Latte array class syntax

Custom locations via classRegex

Class strings inside {embed} / {include} parameters, class => in custom tags, $class variables, and more:

The plugin auto-detects classRegex patterns from your IDE configuration (.vscode/settings.json or .idea/tailwindcss.xml). See Class Regex documentation for setup and recommended patterns.

Options

| Option | Type | Default | Description |

| tailwindStylesheet | string | — | Path to CSS entry point with @import "tailwindcss" | | tailwindClassRegex | string | "" | JSON array of classRegex patterns; empty = auto-detect from IDE | | tailwindAttributes | string[] | [] | Additional HTML attributes to sort as class lists | | tailwindNclassWhitespace | string | "normalize-barriers" | How n:class whitespace is handled: preserve, normalize-barriers, normalize | | tailwindPreserveWhitespace | boolean | false | Preserve whitespace in class attributes | | tailwindPreserveDuplicates | boolean | false | Keep duplicate classes | | tailwindPropertyOrder | string | "" | Path to stylelint-order compatible config for custom CSS property ordering | | tailwindClassOrder | string | "" | Bucket-based class ordering (unknown / tailwind / regex patterns). Path to JS/JSON file, or JSON-encoded string starting with `` |

See [Options documentation for detailed descriptions and examples.

n:class sorting model

The plugin uses a barrier model for n:class sorting:

• Sortable tokens: bare identifiers (active), single-class strings ('flex') • Barrier tokens: conditionals ($x ? 'active'), variables ($class), multi-class strings ('btn font-bold')

Sortable tokens between barriers are reordered by Tailwind order. Barrier tokens never move. Classes *within* any quoted string or conditional branch are always sorted internally.

Editor setup

PhpStorm / WebStorm

1. Settings → Languages & Frameworks → JavaScript → Prettier 2. Set Run for files to: {**/*.{js,ts,jsx,tsx,css,scss,html,json,latte}} 3. Optionally enable On save

VS Code

1. Install the Prettier extension 2. Add to settings.json:

Known limitations

• Range formatting may have off-by-one behavior due to the Latte preprocessing step. • Cross-barrier ordering is intentionally not supported in n:class.

Support

If this plugin saves you time, consider supporting its development:

• GitHub Sponsors • PayPal

License

MIT

Description from the npm listing.