{"id":20385,"library":"prettier-plugin-latte-tailwindcss","title":"prettier-plugin-latte-tailwindcss","description":"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.","status":"active","version":"0.6.0","language":"javascript","source_language":"en","source_url":"https://github.com/zipper/prettier-plugin-latte-tailwindcss","tags":["javascript","prettier","prettier-plugin","tailwindcss","latte","nette","typescript"],"install":[{"cmd":"npm install prettier-plugin-latte-tailwindcss","lang":"bash","label":"npm"},{"cmd":"yarn add prettier-plugin-latte-tailwindcss","lang":"bash","label":"yarn"},{"cmd":"pnpm add prettier-plugin-latte-tailwindcss","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Peer dependency: the plugin runs as a Prettier plugin","package":"prettier","optional":false},{"reason":"Required peer dependency since v0.4.0: used for Tailwind class sorting logic","package":"@tailwindcss/node","optional":false}],"imports":[{"note":"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.","wrong":"import plugin from 'prettier-plugin-latte-tailwindcss'","symbol":"default","correct":"plugins: ['prettier-plugin-latte-tailwindcss'] in .prettierrc"},{"note":"Install as a dev dependency. Peer deps prettier and @tailwindcss/node must also be installed.","wrong":"npm install prettier-plugin-latte-tailwindcss (missing -D, it's a dev dependency)","symbol":"prettier-plugin-latte-tailwindcss","correct":"npm install -D prettier-plugin-latte-tailwindcss"},{"note":"The plugin registers a 'latte' parser. Do NOT use parser: 'html' or the plugin won't activate.","wrong":"overrides: { files: '*.latte', options: { parser: 'html' } }","symbol":"latte-language","correct":"overrides: { files: '*.latte', options: { parser: 'latte' } } in .prettierrc"}],"quickstart":{"code":"// .prettierrc\n{\n  \"plugins\": [\"prettier-plugin-latte-tailwindcss\"],\n  \"tailwindStylesheet\": \"./resources/css/app.css\",\n  \"overrides\": [\n    {\n      \"files\": \"*.latte\",\n      \"options\": {\n        \"parser\": \"latte\"\n      }\n    }\n  ]\n}\n\n// Install\n// npm install -D prettier prettier-plugin-latte-tailwindcss @tailwindcss/node\n\n// Then run: npx prettier --write \"**/*.latte\"\n\n// Example Latte file before sort:\n// <div class=\"mt-4 flex text-left items-center\">\n// <div n:class=\"'mt-4', 'flex', $active ? 'font-bold', 'text-sm', 'items-center'\">\n\n// After sort:\n// <div class=\"flex items-center text-left mt-4\">\n// <div n:class=\"'flex', 'mt-4', $active ? 'font-bold', 'items-center', 'text-sm'\">","lang":"typescript","description":"Minimal .prettierrc config to enable sorting Tailwind classes in Latte templates, with install command and before/after example."},"warnings":[{"fix":"Run: npm install -D @tailwindcss/node@latest","message":"@tailwindcss/node is now a required peer dependency (since v0.4.0). The plugin will not sort classes without it.","severity":"breaking","affected_versions":">=0.4.0"},{"fix":"Uninstall old package: npm uninstall prettier-plugin-latte-tailwind, then install new: npm install -D prettier-plugin-latte-tailwindcss. Update .prettierrc plugins array.","message":"Package renamed from 'prettier-plugin-latte-tailwind' to 'prettier-plugin-latte-tailwindcss' in v0.3.0. Existing installations will not update automatically.","severity":"breaking","affected_versions":">=0.3.0"},{"fix":"No fix needed; you can remove the option from config if you're using the default.","message":"The option 'tailwindNclassWhitespace' with value 'normalize-barriers' is the default. Setting it explicitly is unnecessary but not deprecated.","severity":"deprecated","affected_versions":">=0.1.0"},{"fix":"Upgrade Node.js to v20.19 or later (or use nvm to switch).","message":"The plugin requires Node.js >=20.19. Older Node versions will fail to load the plugin.","severity":"gotcha","affected_versions":">=0.1.0"},{"fix":"Set tailwindStylesheet to your project's CSS entry point (e.g., './resources/css/app.css').","message":"If you omit 'tailwindStylesheet', the plugin uses a default @import \"tailwindcss\" which may reorder classes differently than your custom setup.","severity":"gotcha","affected_versions":">=0.1.0"},{"fix":"Use separate string literals or single classes in n:class arrays to get them sorted.","message":"Classes inside PHP concatenation expressions like 'icon--' . $icon['icon'] are treated as barrier tokens and not sorted individually.","severity":"gotcha","affected_versions":">=0.1.0"}],"env_vars":null,"last_verified":"2026-04-25T00:00:00.000Z","next_check":"2026-07-24T00:00:00.000Z","problems":[{"fix":"Run: npm install -D prettier-plugin-latte-tailwindcss (in your project directory). Ensure your working directory contains node_modules.","cause":"The package is not installed or is a global install without proper resolve.","error":"Module not found: Error: Can't resolve 'prettier-plugin-latte-tailwindcss'"},{"fix":"Install: npm install -D @tailwindcss/node@>=4.0.0","cause":"Missing @tailwindcss/node peer dependency; plugin cannot access Tailwind config.","error":"TypeError: Cannot read properties of undefined (reading 'tailwindConfig')"},{"fix":"Add to .prettierrc: overrides: { files: '*.latte', options: { parser: 'latte' } }","cause":"Prettier doesn't recognize .latte files; the 'latte' parser must be explicitly set via overrides.","error":"Error: No parser could be inferred for file: template.latte"},{"fix":"npm install -D @tailwindcss/node@latest","cause":"@tailwindcss/node is not installed (required since v0.4.0).","error":"Error: Cannot find module '@tailwindcss/node'"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}