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

npm install -D prettier-plugin-latte-tailwindcss

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

Minimal .prettierrc:

{
  "plugins": ["prettier-plugin-latte-tailwindcss"],
  "tailwindStylesheet": "./resources/css/app.css"
}

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.

{* Before *}
<div class="mt-4 flex text-left items-center">
<div n:class="'mt-4', 'flex', $active ? 'font-bold', 'text-sm', 'items-center'">

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

Latte array class syntax

{* Before *}
<div class={['mt-4', 'flex', 'active' => $isActive, $dynamicClass, 'text-sm']}>

{* After *}
<div class={['flex', 'mt-4', 'active' => $isActive, $dynamicClass, 'text-sm']}>

Custom locations via classRegex

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

{embed '~card',
  class: 'mt-4 flex items-center',
  backgroundClass: $highlighted ? 'bg-brand-primary'}

{pdImg $image product-600,
  class => 'mt-4 flex items-center'}

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 |

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:

{
  "[latte]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  }
}

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