ember-template-lint-plugin-tailwindcss

5.1.0 verified Fri May 01 auth: no javascript

An ember-template-lint plugin that enforces Tailwind CSS best practices in Ember/Glimmer templates. Current stable version is 5.1.0, released regularly with semver versioning. Ships TypeScript definitions. Key differentiators: provides two custom lint rules (class-wrap and class-order) specifically designed for Tailwind CSS utility classes, auto-detects Tailwind classes via configurable matchers, and integrates seamlessly with ember-template-lint's recommended configuration. Unlike generic HTML linters, this plugin understands Tailwind's class naming conventions and ordering preferences.

Common errors

error Cannot find module 'ember-template-lint-plugin-tailwindcss' ↓

cause The plugin is not installed or not listed in devDependencies.

fix

Run yarn add -D ember-template-lint-plugin-tailwindcss or npm install --save-dev ember-template-lint-plugin-tailwindcss.

error Rule 'class-order' was found but has invalid configuration ↓

cause The rule configuration object does not match the expected schema.

fix

Ensure rule configuration is either a boolean or an object with 'matchers', 'sorters', and 'groups' keys. See README for format.

error Cannot extend unknown configuration 'ember-template-lint-plugin-tailwindcss:recommended' ↓

cause The plugin is not listed in the plugins array before the extends property.

fix

Add 'ember-template-lint-plugin-tailwindcss' to the plugins array in .template-lintrc.js.

Warnings

breaking Plugin v5 requires ember-template-lint ^4.0.0 || ^5.0.0; previous plugin v4 required ^3.0.0. ↓

fix Update ember-template-lint to v4 or v5 and update plugin to v5.

deprecated Node 12 and 14 are no longer supported; updated engine field to require Node >=16. ↓

fix Use Node 16 or newer.

gotcha class-wrap rule may conflict with ember-template-lint-plugin-prettier; both attempt to control line wrapping in class attributes. ↓

fix Disable class-wrap if using the prettier plugin, or disable prettier's line-length rules for templates.

gotcha Custom matchers and sorters must be functions that return booleans and numbers respectively; configuration is runtime-evaluated, not serializable. ↓

fix Ensure matcher functions return true/false and sorter functions return negative/positive numbers correctly.

Install

npm install ember-template-lint-plugin-tailwindcss

yarn add ember-template-lint-plugin-tailwindcss

pnpm add ember-template-lint-plugin-tailwindcss

Imports

default (plugin)
wrong
```
const plugin = require('ember-template-lint-plugin-tailwindcss');
```
correct
```
module.exports = { plugins: ['ember-template-lint-plugin-tailwindcss'] };
```
The plugin is auto-discovered by ember-template-lint via the plugins array; no direct require/import of the plugin itself is needed.
rules
wrong
```
const { config } = require('ember-template-lint-plugin-tailwindcss');
```
correct
```
import type { LintConfig } from 'ember-template-lint';
```
Rules are configured via .template-lintrc.js, not imported directly. For TypeScript, import types from ember-template-lint.
recommended config
wrong
```
extends: ['recommended', 'tailwindcss:recommended']
```
correct
```
extends: ['ember-template-lint-plugin-tailwindcss:recommended']
```
Full plugin name must be used in extends; ember-template-lint resolves it from the plugins list.

Quickstart

Configure ember-template-lint to use the tailwindcss plugin with recommended rules plus custom class-wrap settings.

// .template-lintrc.js
module.exports = {
  plugins: ['ember-template-lint-plugin-tailwindcss'],
  extends: ['recommended', 'ember-template-lint-plugin-tailwindcss:recommended'],
  rules: {
    'class-order': 'error',
    'class-wrap': ['error', { classesPerLine: 5 }],
  },
};