# How to Fix prettier plugin tailwindcss in Next.js: Common Configuration Issues > Fix prettier plugin tailwindcss in Nextjs by checking plugin declaration Tailwind config and installing the correct versions of Prettier and the plugin. Resolve formatting issues. - Repository: [Vercel/next.js](https://github.com/vercel/next.js) - Tags: how-to-guide - Published: 2026-02-20 --- **The prettier plugin tailwindcss only sorts utility classes when the plugin is explicitly declared in your Prettier configuration, a discoverable Tailwind config exists at the project root, and both Prettier v3 and the plugin (≥0.5) are installed.** Setting up prettier plugin tailwindcss in a Next.js application requires aligning several configuration files across the vercel/next.js ecosystem. When the plugin silently fails to reorder utility classes, the issue usually stems from version mismatches or missing entries in your Prettier configuration rather than the plugin itself being broken. ## Common Configuration Pitfalls ### Version Mismatch Between Prettier and the Plugin Prettier v3 requires `prettier-plugin-tailwindcss` version 0.5 or higher. If you install an older release, such as the `^0.1.13` version still referenced in the `examples/with-cloudinary` directory, the plugin crashes or becomes a no-op when used with modern Prettier. Run the following to ensure compatibility: ```bash npm install -D prettier@latest prettier-plugin-tailwindcss@latest ``` Verify in your [`pnpm-lock.yaml`](https://github.com/vercel/next.js/blob/main/pnpm-lock.yaml) or [`package-lock.json`](https://github.com/vercel/next.js/blob/main/package-lock.json) that the resolved version is `0.6.x` (as locked at line 995 in the vercel/next.js repository). ### Missing Plugin Declaration in .prettierrc The default [`.prettierrc.json`](https://github.com/vercel/next.js/blob/main/.prettierrc.json) shipped with the Next.js repository only sets generic stylistic rules and does not include the Tailwind plugin. Without the `plugins` array entry, Prettier loads no third-party formatters. Add the plugin explicitly: ```json { "singleQuote": true, "semi": false, "plugins": ["prettier-plugin-tailwindcss"] } ``` ### Undiscoverable Tailwind Configuration File The plugin searches for `tailwind.config.{js,cjs,ts}` in the project root or parent folders of the files being formatted. If it cannot locate this file, it assumes Tailwind is not in use and skips processing. Ensure a config file exists at your repository root. The [`examples/with-cloudinary/tailwind.config.js`](https://github.com/vercel/next.js/blob/main/examples/with-cloudinary/tailwind.config.js) demonstrates a valid structure that the plugin can detect. ### Incorrect Content Paths in tailwind.config.js The plugin reads Tailwind’s generated class list to determine ordering. If the `content` glob in your Tailwind config excludes the files you edit, many classes are considered unused and the plugin will not reorder them. Update your [`tailwind.config.js`](https://github.com/vercel/next.js/blob/main/tailwind.config.js): ```javascript /** @type {import('tailwindcss').Config} */ module.exports = { content: [ "./app/**/*.{js,ts,jsx,tsx}", "./pages/**/*.{js,ts,jsx,tsx}", "./components/**/*.{js,ts,jsx,tsx}" ], theme: { extend: {} }, plugins: [] }; ``` ### .prettierignore Excluding Target Files If a file is listed in `.prettierignore`, Prettier never processes it, so Tailwind ordering never occurs. Review your ignore patterns to ensure you are not accidentally excluding `**/*.tsx` or `**/*.jsx` files that contain Tailwind classes. ### Dynamic Class Expressions Breaking Sorting The plugin only rewrites plain string literals (e.g., `className="p-4 mt-2"`). When you concatenate strings or use template literals with variables (e.g., `` className={`p-${size}`} ``), the plugin cannot safely reorder the classes. Keep static Tailwind classes in plain strings; move dynamic parts to separate variables or use the `clsx` helper. ### Running Prettier on the Wrong File Set The `lint-fix` script in [`packages/create-next-app/package.json`](https://github.com/vercel/next.js/blob/main/packages/create-next-app/package.json) demonstrates the intended wiring, but it targets specific template directories. If your script only formats `templates/*-tw/**`, it will miss your actual application files. Use a glob that covers your entire codebase: ```bash pnpm prettier -w . "src/**/*.{js,ts,tsx,jsx}" ``` ## How the Integration Works in the Next.js Repository The vercel/next.js repository ships a specific wiring that demonstrates the intended setup: 1. **Lockfile Pinning**: The root [`pnpm-lock.yaml`](https://github.com/vercel/next.js/blob/main/pnpm-lock.yaml) pins `prettier-plugin-tailwindcss@0.6.2` at line 995, ensuring the Create-Next-App templates receive a compatible version during scaffolding. 2. **Base Configuration**: The [`.prettierrc.json`](https://github.com/vercel/next.js/blob/main/.prettierrc.json) at the repository root provides generic formatting rules but leaves the plugin declaration to individual projects, explaining why a fresh copy of this file does not automatically enable Tailwind sorting. 3. **Template Formatting**: The [`packages/create-next-app/package.json`](https://github.com/vercel/next.js/blob/main/packages/create-next-app/package.json) includes a `"lint-fix"` script that runs Prettier with the plugin on generated Tailwind templates, proving the intended integration works when all pieces are present. 4. **Config Detection**: The Turbopack PostCSS transform logic in [`turbopack-node/src/transforms/postcss.rs`](https://github.com/vercel/next.js/blob/main/turbopack-node/src/transforms/postcss.rs) searches for [`tailwind.config.js`](https://github.com/vercel/next.js/blob/main/tailwind.config.js) using the same parent-path traversal that the Prettier plugin uses, confirming the file must be discoverable from the project root. ## Configuration Examples ### Minimal .prettierrc.json for Next.js + Tailwind ```json { "singleQuote": true, "semi": false, "trailingComma": "es5", "plugins": ["prettier-plugin-tailwindcss"] } ``` ### Complete tailwind.config.js ```javascript /** @type {import('tailwindcss').Config} */ module.exports = { content: [ "./app/**/*.{js,ts,jsx,tsx}", "./pages/**/*.{js,ts,jsx,tsx}", "./components/**/*.{js,ts,jsx,tsx}" ], theme: { extend: {} }, plugins: [] }; ``` ### NPM Script for Formatting Add to [`package.json`](https://github.com/vercel/next.js/blob/main/package.json): ```json { "scripts": { "format": "prettier -w . \"src/**/*.{js,ts,tsx,jsx}\"" } } ``` ### Before and After Formatting ```tsx // Input
// Output after prettier plugin tailwindcss
``` ## Summary - **Install compatible versions**: Prettier v3 requires `prettier-plugin-tailwindcss` ≥0.5 (vercel/next.js uses 0.6.2). - **Declare the plugin**: Add `"plugins": ["prettier-plugin-tailwindcss"]` to [`.prettierrc.json`](https://github.com/vercel/next.js/blob/main/.prettierrc.json). - **Ensure config discovery**: Place [`tailwind.config.js`](https://github.com/vercel/next.js/blob/main/tailwind.config.js) at the project root so the plugin can locate it. - **Verify content paths**: The `content` array in your Tailwind config must include all files containing utility classes. - **Check ignore patterns**: Remove accidental exclusions from `.prettierignore` that target your source files. - **Use plain strings**: Keep static classes in simple string literals for the plugin to process them. ## Frequently Asked Questions ### Why isn't prettier plugin tailwindcss sorting my classes in Next.js? The plugin becomes a no-op when it cannot find your [`tailwind.config.js`](https://github.com/vercel/next.js/blob/main/tailwind.config.js), when the `plugins` array is missing from `.prettierrc`, or when your Tailwind `content` paths exclude the files being formatted. Verify that your config file exists at the repository root and that your Prettier config explicitly includes the plugin. ### Do I need to install Prettier separately from the plugin? Yes. The `prettier-plugin-tailwindcss` package is a plugin dependency, not a standalone formatter. You must install both `prettier` and `prettier-plugin-tailwindcss` as dev dependencies, ensuring the versions are compatible (Prettier v3 with plugin ≥0.5). ### Can I use prettier plugin tailwindcss with the Next.js App Router? Yes. As long as your [`tailwind.config.js`](https://github.com/vercel/next.js/blob/main/tailwind.config.js) includes the App Router paths (e.g., `./app/**/*.{js,ts,jsx,tsx}`) in the `content` array, the plugin will process files in the `app` directory exactly as it does for the `pages` directory. ### Why does the plugin work in some files but not others? If some files use dynamic class construction (template literals with variables or string concatenation), the plugin cannot safely reorder those classes. Additionally, check if specific files are listed in `.prettierignore` or excluded by your Prettier command's file glob.