Prettier Plugin Tailwind Liquid

A Prettier plugin for sorting Tailwind CSS classes inside .liquid files, similar to prettier-plugin-tailwindcss.

This plugin supports sorting Tailwind classes while preserving Shopify Liquid syntax ({{ }} and {% %}).

Features

• Sort Tailwind CSS classes alphabetically and by modifiers (sm:, md:, etc.)
• Supports Liquid template syntax without breaking code
• Using @shopify/prettier-plugin-liquid to handle full Liquid parsing

Install

# with npm
npm install -D prettier-plugin-tailwindcss-liquid

# with yarn
yarn add -D prettier-plugin-tailwindcss-liquid

Configuration

.prettierrc

{
    "plugins": ["@shopify/prettier-plugin-liquid", "prettier-plugin-tailwindcss-liquid"]
}

.vscode/settings.json

{
    "[liquid]": 
    {
        "editor.defaultFormatter": "esbenp.prettier-vscode",
    }
}

Example

Before formating

<div class="{{ some_variable }} md:text-center text-red-500">
  {{ content }}
</div>

After formating

<div class="text-red-500 md:text-center {{ some_variable }}">
  {{ content }}
</div>