{"id":25222,"library":"ember-template-lint-plugin-tailwindcss","title":"ember-template-lint-plugin-tailwindcss","description":"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.","status":"active","version":"5.1.0","language":"javascript","source_language":"en","source_url":null,"tags":["javascript","ember-template-lint","ember-template-lint-plugin","handlebars","glimmer","tailwindcss","typescript"],"install":[{"cmd":"npm install ember-template-lint-plugin-tailwindcss","lang":"bash","label":"npm"},{"cmd":"yarn add ember-template-lint-plugin-tailwindcss","lang":"bash","label":"yarn"},{"cmd":"pnpm add ember-template-lint-plugin-tailwindcss","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Peer dependency required to provide the linting framework and rule infrastructure","package":"ember-template-lint","optional":false}],"imports":[{"note":"The plugin is auto-discovered by ember-template-lint via the plugins array; no direct require/import of the plugin itself is needed.","wrong":"const plugin = require('ember-template-lint-plugin-tailwindcss');","symbol":"default (plugin)","correct":"module.exports = { plugins: ['ember-template-lint-plugin-tailwindcss'] };"},{"note":"Rules are configured via .template-lintrc.js, not imported directly. For TypeScript, import types from ember-template-lint.","wrong":"const { config } = require('ember-template-lint-plugin-tailwindcss');","symbol":"rules","correct":"import type { LintConfig } from 'ember-template-lint';"},{"note":"Full plugin name must be used in extends; ember-template-lint resolves it from the plugins list.","wrong":"extends: ['recommended', 'tailwindcss:recommended']","symbol":"recommended config","correct":"extends: ['ember-template-lint-plugin-tailwindcss:recommended']"}],"quickstart":{"code":"// .template-lintrc.js\nmodule.exports = {\n  plugins: ['ember-template-lint-plugin-tailwindcss'],\n  extends: ['recommended', 'ember-template-lint-plugin-tailwindcss:recommended'],\n  rules: {\n    'class-order': 'error',\n    'class-wrap': ['error', { classesPerLine: 5 }],\n  },\n};","lang":"javascript","description":"Configure ember-template-lint to use the tailwindcss plugin with recommended rules plus custom class-wrap settings."},"warnings":[{"fix":"Update ember-template-lint to v4 or v5 and update plugin to v5.","message":"Plugin v5 requires ember-template-lint ^4.0.0 || ^5.0.0; previous plugin v4 required ^3.0.0.","severity":"breaking","affected_versions":">=5.0.0"},{"fix":"Use Node 16 or newer.","message":"Node 12 and 14 are no longer supported; updated engine field to require Node >=16.","severity":"deprecated","affected_versions":">=5.0.0"},{"fix":"Disable class-wrap if using the prettier plugin, or disable prettier's line-length rules for templates.","message":"class-wrap rule may conflict with ember-template-lint-plugin-prettier; both attempt to control line wrapping in class attributes.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Ensure matcher functions return true/false and sorter functions return negative/positive numbers correctly.","message":"Custom matchers and sorters must be functions that return booleans and numbers respectively; configuration is runtime-evaluated, not serializable.","severity":"gotcha","affected_versions":">=1.0.0"}],"env_vars":null,"last_verified":"2026-05-01T00:00:00.000Z","next_check":"2026-07-30T00:00:00.000Z","problems":[{"fix":"Run `yarn add -D ember-template-lint-plugin-tailwindcss` or `npm install --save-dev ember-template-lint-plugin-tailwindcss`.","cause":"The plugin is not installed or not listed in devDependencies.","error":"Cannot find module 'ember-template-lint-plugin-tailwindcss'"},{"fix":"Ensure rule configuration is either a boolean or an object with 'matchers', 'sorters', and 'groups' keys. See README for format.","cause":"The rule configuration object does not match the expected schema.","error":"Rule 'class-order' was found but has invalid configuration"},{"fix":"Add 'ember-template-lint-plugin-tailwindcss' to the plugins array in .template-lintrc.js.","cause":"The plugin is not listed in the plugins array before the extends property.","error":"Cannot extend unknown configuration 'ember-template-lint-plugin-tailwindcss:recommended'"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}