ember-template-lint-plugin-tailwindcss 🌬

A Tailwind CSS 🌬 plugin for ember-template-lint 👨🏻.

Install

yarn add -D ember-template-lint-plugin-tailwindcss

// .template-lintrc.js
module.exports = {
  plugins: ['ember-template-lint-plugin-tailwindcss'],
};

Recommended configuration

A recommended configuration is available. To use it, merge the following object to your .template-lintrc.js file:

// .template-lintrc.js
module.exports = {
  plugins: ['ember-template-lint-plugin-tailwindcss'],
  extends: [
    'recommended', // this comes from ember-template-lint
    'ember-template-lint-plugin-tailwindcss:recommended'
  ]
};

The ember-template-lint-plugin-tailwindcss:recommended set will apply these rules.

Configuration

You can use all the standard ember-template-lint configuration options. For example project wide:

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

Configuration options

class-wrap

• boolean - true to enable / false (default) to disable
• object -- An object with the following keys:
  • classesPerLine -- integer|null: Put a line-wrap in the class attribute after N classes

Note: This rule tends to fight with ember-template-lint-plugin-prettier, so if you are using prettier plugin, it's recommended to have class-wrap disabled.

class-order

• boolean - true to enable / false to disable
• object -- object: of marchers, sorters and groups:
  • matchers -- object:
    • key: name of the matcher will be used in groups.[].matchBy
    • value: function that returns true if given class belongs to given group; false otherwise
  • sorters -- object:
    • key: name of the sorter will be used in groups.[].sortBy
    • value: function that takes two strings a and b as input and returns number greater than zero if a > b and less than zero if a < b
  • groups -- array of objects:
    • matchBy: name of respective matcher
    • sortBy: name of respective sorter
    • order: determines sorting of all the groups; lower number means group will be applied earlier
  • linebreakBetweenGroups -- false | object
    • false: do not add linebreak between each group
    • object: add a forced linebreak between each group
      • indent: number of how many spaces from class attribute start we should indent
      • onlyWithHint -- false | string:
        • false: this option is always enabled
        • string: enable this option only when class attribute starts with this string
  • disableForMustaches -- false | true:
    • true: won't attempt to insert any linebreaks if class attribute contains any mustache statement
    • false: even class attributes containing mustache statements will be line broken if other settings says so
  • warnForConcat -- false | true:
    • true: will mark concatenated dynamic class attributes as problematic
    • false: won't mark concatenated dynamic class attributes as problematic

class-order rule will look into the groups array and pick each group one by one. It will go through all the classes and use matchBy matcher on them keeping only those that return truthy value (rest will be carried to the next group). Then the sortBy function will be used to rearrange the order of those classes. In the end the groups of sorted classes are concatenated according to the order parameter ascending.

This means that last entry in groups should always have matchBy: "all", otherwise this plugin will throw away classes that did not match any groups.

If you omit matchBy: "all" from your groups you can also use this plugin to make sure that only classes matched by other matchers in your groups can be used. Classes that don't match any groups will be discarded.

Defaults

{
  warnForConcat: false // // Note: This is the default to preserve backwards compatibility for `2.x` version; Will be flipped to `true` in `5.x`
  disableForMustaches: true, // Note: This is the default to preserve backwards compatibility for `2.x` version; Will be flipped to `false` in `5.x`
  linebreakBetweenGroups: {
    onlyWithHint: `\n`,
    indent: 2,
  }
}

This will allow following:

<div class="gap-4 grid grid-cols-2 lg:grid-cols-5 md:grid-cols-3">
  foo
</div>

<div
  class="                           <-- has to start with `\n` for that options to take place
    gap-4 grid grid-cols-2          <-- group-1
    lg:grid-cols-5 md:grid-cols-3   <-- group-2
  "
>
  bar
</div>

matchers

• tailwindClass: Matches if given class comes from tailwind (excluding variants)
• tailwindVariant: Matches if given class is tailwind variant
• all: Matches anything

sorters

• alphabet: Sorts by alphabet descending
• classList: Sorts by predefined list of classes that is trying to mimic groupping by logical blocks

groups

groups: [
  {
    matchBy: "tailwindClass",
    sortBy: "alphabet",
    order: 2,
  },
  {
    matchBy: "tailwindVariant",
    sortBy: "alphabet",
    order: 3,
  },
  {
    matchBy: "all",
    sortBy: "alphabet",
    order: 1,
  },
],

Credits

• Headwind vscode extension for the initial list for sorting the classes & the idea.
• ember-template-lint-plugin-prettier for the guidance on how-to build an ember-template-lint-plugin.