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

default: class="([^"]*)"

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",
    "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! 🎉