{"id":20355,"library":"prettier-plugin-elm-tailwind","title":"Prettier Plugin Elm Tailwind","description":"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.","status":"active","version":"0.2.3","language":"javascript","source_language":"en","source_url":"https://github.com/altalang/prettier-plugin-elm-tailwind","tags":["javascript","prettier","prettier-plugin","elm","tailwindcss","formatter"],"install":[{"cmd":"npm install prettier-plugin-elm-tailwind","lang":"bash","label":"npm"},{"cmd":"yarn add prettier-plugin-elm-tailwind","lang":"bash","label":"yarn"},{"cmd":"pnpm add prettier-plugin-elm-tailwind","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Peer dependency. Prettier is the core formatter.","package":"prettier","optional":false},{"reason":"Peer dependency. Required for Elm AST parsing and formatting.","package":"prettier-plugin-elm","optional":false},{"reason":"Optional peer dependency. Provides official Tailwind class ordering; if missing, a built-in fallback is used.","package":"prettier-plugin-tailwindcss","optional":true}],"imports":[{"note":"The plugin is automatically loaded by Prettier when installed as a plugin.","symbol":"default","correct":"// No explicit import needed; plugin auto-detects on .elm files"},{"note":"Common mistake: trying to import the plugin in JS code. It's a Prettier plugin, not a JS library.","wrong":"// No import/require needed; config alone suffices","symbol":"default","correct":"// Add to prettier config: { \"plugins\": [\"prettier-plugin-elm-tailwind\"] }"},{"note":"The plugin is activated via Prettier configuration, not through JavaScript imports.","wrong":"// No need to require() the plugin","symbol":"default","correct":"// In package.json add: \"prettier\": { \"plugins\": [\"prettier-plugin-elm-tailwind\"] }"}],"quickstart":{"code":"// Install dependencies\nnpm install --save-dev prettier prettier-plugin-elm prettier-plugin-elm-tailwind\n\n// Create .prettierrc.json with plugins\n{\n  \"plugins\": [\"prettier-plugin-elm\", \"prettier-plugin-elm-tailwind\"]\n}\n\n// Format an Elm file\nnpx prettier --write src/Main.elm\n\n// Example input (Main.elm):\n// module Main exposing (main)\n// import Html exposing (div, text)\n// import Html.Attributes exposing (class)\n// main = div [ class \"text-lg flex p-4 bg-blue-500\" ] [ text \"Hello\" ]\n//\n// After formatting:\n// main = div [ class \"flex p-4 bg-blue-500 text-lg\" ] [ text \"Hello\" ]","lang":"typescript","description":"Setup and usage example showing installation, configuration, and formatting an Elm file with Tailwind classes."},"warnings":[{"fix":"Update prettier-plugin-elm to ^0.9.0 or newer.","message":"Requires prettier-plugin-elm v0.9.0 or higher. Older versions may cause errors or incorrect formatting.","severity":"breaking","affected_versions":"<0.9.0 of prettier-plugin-elm"},{"fix":"Install prettier-plugin-tailwindcss as a dev dependency for consistent ordering: npm install --save-dev prettier-plugin-tailwindcss","message":"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.","severity":"breaking","affected_versions":"all"},{"fix":"Ensure all Tailwind classes are in standard class or classList attributes.","message":"The plugin only sorts classes inside Elm attributes named class or classList. Custom attributes that contain class strings are not processed.","severity":"gotcha","affected_versions":"all"},{"fix":"Place dynamic base classes on the left and sorted Tailwind classes on the right: class \"base \" ++ \"flex p-4\"","message":"String concatenation within class attributes is supported, but only the right-hand side of concatenation is sorted. The left side is preserved as-is.","severity":"gotcha","affected_versions":"all"},{"fix":"Use prettier ^3.0.0 with corresponding plugin configuration if needed.","message":"Prettier v2 is officially supported but Prettier v3 changed plugin resolution. Ensure your Prettier version is compatible (^2.0.0 or ^3.0.0).","severity":"deprecated","affected_versions":"0.2.0 - 0.2.3"}],"env_vars":null,"last_verified":"2026-04-25T00:00:00.000Z","next_check":"2026-07-24T00:00:00.000Z","problems":[{"fix":"Run npm install --save-dev prettier-plugin-elm-tailwind","cause":"The plugin is not installed in node_modules.","error":"Error: Cannot find module 'prettier-plugin-elm-tailwind'"},{"fix":"Add both 'prettier-plugin-elm' and 'prettier-plugin-elm-tailwind' to the plugins array in .prettierrc.","cause":"Prettier does not have the Elm plugin or Elm-Tailwind plugin configured.","error":"[error] No matching plugin found for file \"src/Main.elm\""},{"fix":"Install prettier-plugin-elm: npm install --save-dev prettier-plugin-elm","cause":"Missing peer dependency prettier-plugin-elm.","error":"Error: prettier-plugin-elm is required for prettier-plugin-elm-tailwind to work."},{"fix":"Ensure class values are string literals, string concatenations, or classList expressions.","cause":"The plugin encountered a class attribute that it cannot parse (e.g., function call returning a string).","error":"Error: Unsupported class attribute format"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}