Prettier Plugin Elm Tailwind

0.2.3 verified Sat Apr 25 auth: no javascript

A Prettier plugin for sorting Tailwind CSS classes in Elm files. Current stable version is 0.2.3. It integrates with prettier-plugin-elm and optionally with prettier-plugin-tailwindcss to provide consistent Tailwind class ordering within Elm's class and classList attributes. The plugin supports string concatenation and conditional class lists, and includes a built-in fallback sorter if the official Tailwind plugin is unavailable. Releases are infrequent; the plugin is stable and covers common Elm patterns.

Common errors

error Error: Cannot find module 'prettier-plugin-elm-tailwind' ↓

cause The plugin is not installed in node_modules.

fix

Run npm install --save-dev prettier-plugin-elm-tailwind

error [error] No matching plugin found for file "src/Main.elm" ↓

cause Prettier does not have the Elm plugin or Elm-Tailwind plugin configured.

fix

Add both 'prettier-plugin-elm' and 'prettier-plugin-elm-tailwind' to the plugins array in .prettierrc.

error Error: prettier-plugin-elm is required for prettier-plugin-elm-tailwind to work. ↓

cause Missing peer dependency prettier-plugin-elm.

fix

Install prettier-plugin-elm: npm install --save-dev prettier-plugin-elm

error Error: Unsupported class attribute format ↓

cause The plugin encountered a class attribute that it cannot parse (e.g., function call returning a string).

fix

Ensure class values are string literals, string concatenations, or classList expressions.

Warnings

breaking Requires prettier-plugin-elm v0.9.0 or higher. Older versions may cause errors or incorrect formatting. ↓

fix Update prettier-plugin-elm to ^0.9.0 or newer.

breaking Peer dependency prettier-plugin-tailwindcss is optional but required for canonical Tailwind ordering. Without it, the built-in fallback sorts differently and may not match official Tailwind order exactly. ↓

fix Install prettier-plugin-tailwindcss as a dev dependency for consistent ordering: npm install --save-dev prettier-plugin-tailwindcss

gotcha The plugin only sorts classes inside Elm attributes named class or classList. Custom attributes that contain class strings are not processed. ↓

fix Ensure all Tailwind classes are in standard class or classList attributes.

gotcha String concatenation within class attributes is supported, but only the right-hand side of concatenation is sorted. The left side is preserved as-is. ↓

fix Place dynamic base classes on the left and sorted Tailwind classes on the right: class "base " ++ "flex p-4"

deprecated Prettier v2 is officially supported but Prettier v3 changed plugin resolution. Ensure your Prettier version is compatible (^2.0.0 or ^3.0.0). ↓

fix Use prettier ^3.0.0 with corresponding plugin configuration if needed.

Install

npm install prettier-plugin-elm-tailwind

yarn add prettier-plugin-elm-tailwind

pnpm add prettier-plugin-elm-tailwind

Imports

default
```
// No explicit import needed; plugin auto-detects on .elm files
```
The plugin is automatically loaded by Prettier when installed as a plugin.

default

wrong

// No import/require needed; config alone suffices

correct

// Add to prettier config: { "plugins": ["prettier-plugin-elm-tailwind"] }

Common mistake: trying to import the plugin in JS code. It's a Prettier plugin, not a JS library.

default

wrong

// No need to require() the plugin

correct

// In package.json add: "prettier": { "plugins": ["prettier-plugin-elm-tailwind"] }

The plugin is activated via Prettier configuration, not through JavaScript imports.

Quickstart

Setup and usage example showing installation, configuration, and formatting an Elm file with Tailwind classes.

// Install dependencies
npm install --save-dev prettier prettier-plugin-elm prettier-plugin-elm-tailwind

// Create .prettierrc.json with plugins
{
  "plugins": ["prettier-plugin-elm", "prettier-plugin-elm-tailwind"]
}

// Format an Elm file
npx prettier --write src/Main.elm

// Example input (Main.elm):
// module Main exposing (main)
// import Html exposing (div, text)
// import Html.Attributes exposing (class)
// main = div [ class "text-lg flex p-4 bg-blue-500" ] [ text "Hello" ]
//
// After formatting:
// main = div [ class "flex p-4 bg-blue-500 text-lg" ] [ text "Hello" ]