Registry /
devops / prettier-plugin-elm-tailwind
Install & Compatibility
Where this runs
tested against v? · npm install
Install × environment matrix
Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux
muslnode 18–226 runs
build_error
glibcnode 18–226 runs
build_error
Code
Verified usage
Verified import paths — ran on the pinned version, not inferred.
default
✓ // No explicit import needed; plugin auto-detects on .elm files
The plugin is automatically loaded by Prettier when installed as a plugin.
default
✓ // Add to prettier config: { "plugins": ["prettier-plugin-elm-tailwind"] }
✗ // No import/require needed; config alone suffices
Common mistake: trying to import the plugin in JS code. It's a Prettier plugin, not a JS library.
default
✓ // In package.json add: "prettier": { "plugins": ["prettier-plugin-elm-tailwind"] }
✗ // No need to require() the plugin
The plugin is activated via Prettier configuration, not through JavaScript imports.
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" ]
Debug
Known issues
breakingRequires prettier-plugin-elm v0.9.0 or higher. Older versions may cause errors or incorrect formatting.fixUpdate prettier-plugin-elm to ^0.9.0 or newer.
affects: <0.9.0 of prettier-plugin-elm
breakingPeer 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.fixInstall prettier-plugin-tailwindcss as a dev dependency for consistent ordering: npm install --save-dev prettier-plugin-tailwindcss
affects: all
gotchaThe plugin only sorts classes inside Elm attributes named class or classList. Custom attributes that contain class strings are not processed.fixEnsure all Tailwind classes are in standard class or classList attributes.
affects: all
gotchaString concatenation within class attributes is supported, but only the right-hand side of concatenation is sorted. The left side is preserved as-is.fixPlace dynamic base classes on the left and sorted Tailwind classes on the right: class "base " ++ "flex p-4"
affects: all
deprecatedPrettier v2 is officially supported but Prettier v3 changed plugin resolution. Ensure your Prettier version is compatible (^2.0.0 or ^3.0.0).fixUse prettier ^3.0.0 with corresponding plugin configuration if needed.
affects: 0.2.0 - 0.2.3
Errors
Common errors & fixes
Error: Cannot find module 'prettier-plugin-elm-tailwind'
The plugin is not installed in node_modules.
fixRun npm install --save-dev prettier-plugin-elm-tailwind
[error] No matching plugin found for file "src/Main.elm"
Prettier does not have the Elm plugin or Elm-Tailwind plugin configured.
fixAdd both 'prettier-plugin-elm' and 'prettier-plugin-elm-tailwind' to the plugins array in .prettierrc.
Error: prettier-plugin-elm is required for prettier-plugin-elm-tailwind to work.
Missing peer dependency prettier-plugin-elm.
fixInstall prettier-plugin-elm: npm install --save-dev prettier-plugin-elm
Error: Unsupported class attribute format
The plugin encountered a class attribute that it cannot parse (e.g., function call returning a string).
fixEnsure class values are string literals, string concatenations, or classList expressions.
Audit
Dependencies
prettierrequiredPeer dependency. Prettier is the core formatter.
prettier-plugin-elmrequiredPeer dependency. Required for Elm AST parsing and formatting.
prettier-plugin-tailwindcssoptionalOptional peer dependency. Provides official Tailwind class ordering; if missing, a built-in fallback is used.