How to Fix prettier plugin tailwindcss in Next.js: Common Configuration Issues

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:

npm install -D prettier@latest prettier-plugin-tailwindcss@latest

Verify in your pnpm-lock.yaml or 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 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:

{
  "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 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:

/** @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 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:

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 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 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 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 searches for 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

{
  "singleQuote": true,
  "semi": false,
  "trailingComma": "es5",
  "plugins": ["prettier-plugin-tailwindcss"]
}

Complete tailwind.config.js

/** @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:

{
  "scripts": {
    "format": "prettier -w . \"src/**/*.{js,ts,tsx,jsx}\""
  }
}

Before and After Formatting

// Input
<div className="bg-white p-4 flex items-center justify-between mt-2 rounded-lg shadow-md">

// Output after prettier plugin tailwindcss
<div className="flex items-center justify-between rounded-lg bg-white p-4 mt-2 shadow-md">

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.
• Ensure config discovery: Place 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, 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 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.

{
  "mcpServers": {
    "instagit": {
      "command": "npx",
      "args": ["-y", "instagit@latest"]
    }
  }
}