@ttskch/prettier-plugin-tailwindcss-anywhere

prettier-plugin-tailwindcss-anywhere

A Prettier plugin for sorting TailwindCSS classes in any HTML-like language, like Twig etc⚡

Installation

npm install -D prettier \
               prettier-plugin-tailwindcss \
               @ttskch/prettier-plugin-tailwindcss-anywhere

Usage

This plugin is intended to be used in conjunction with prettier-plugin-tailwindcss.

For example, by setting .prettierrc as follows, you can sort classes even in files of template engines such as Twig that cannot be processed by prettier-plugin-tailwindcss.

// .prettierrc
{
  "plugins": ["prettier-plugin-tailwindcss", "@ttskch/prettier-plugin-tailwindcss-anywhere"],
  "overrides": [
    {
      "files": "*.html.twig",
      "options": {
        "parser": "anywhere",
      }
    }
  ]
}

Before

{% extends 'base.html.twig %}
  {% block content %}
    <div class="space-y-4 flex-col flex">
      <div class="p-4 rounded-lg bg-blue-500 text-white rounded-lg p-4">
        Hello, {{ name }}!
      </div>
    </div>
  {% endblock %}
{% endblock %}

After

  {% extends 'base.html.twig %}
    {% block content %}
-     <div class="space-y-4 flex-col flex">
+     <div class="flex flex-col space-y-4">
-       <div class="p-4 rounded-lg bg-blue-500 text-white rounded-lg p-4">
+       <div class="rounded-lg bg-blue-500 p-4 text-white">
          Hello, {{ name }}!
        </div>
      </div>
    {% endblock %}
  {% endblock %}

Options

regex

The regex option allows you to specify the part that corresponds to the value of the class attribute using a regular expression.

For example, if you have the following text:

<div class="space-y-4 flex-col flex {% if foo %}is-foo{% endif %}">

In this case, you can specify the following regex to sort only the part before {% if foo %}.

{
  "options": {
    "parser": "anywhere",
    "plugins": ["@ttskch/prettier-plugin-tailwindcss-anywhere"],
    "regex": 'class="([^{}"]*)(?:"| {)' // <-- here
  }
}

- <div class="space-y-4 flex-col flex {% if foo %}is-foo{% endif %}">
+ <div class="flex flex-col space-y-4 {% if foo %}is-foo{% endif %}">

[!NOTE] Note that you need to surround the part you want to see as the class attribute value with () so that the plugin can backreference it.

Getting involved

pnpm install

# Develop...

pnpm check
pnpm test
pnpm build

Thanks! 🎉