Multiple tailwind configs are not handled properly

[artaommahe]

What version of prettier-plugin-tailwindcss are you using?

v0.6.9

What version of Tailwind CSS are you using?

v3.4.16

What version of Node.js are you using?

v20.18.1

What package manager are you using?

npm

What operating system are you using?

macOS 15.1.1 (24B91)

Reproduction URL

https://github.com/artaommahe/tailwind-intellisense-multiple-configs

• clone
• npm install
• npm run dev
• see that everything looks like expected
  
• open Button component in vscode
• see that p-2 and border-secondary classes are not on their expected place like they are some unknown classes
  

Describe your issue

In our project we're on a way of slow migration from the old messy design system (set in the main tailwind config) to the new shinny one (set in another config). While tailwind itself recognizes both configs and there corresponding content files properly and all the colors and other values are correct in the browser, the prettier-plugin-tailwindcss lib struggles here and doesn't recognize classes from the second config within expected folders (new-design/* and ui-kit/*) which is why the sorting result is wrong.

Similar issue with tailwindcss-intellisense vscode extension tailwindlabs/tailwindcss-intellisense#1108

[thecrypticace]

Hey! So we only detect a tailwind.config.js file (or .ts / .cts / .mjs, etc…) in v3 projects. If you have multiple config files you need to specify the paths to them explicitly. Prettier has a built-in feature you can use for this called configuration overrides.

I'd this overrides key to your prettier config:

{
  // …
  "overrides": [
    {
      "files": ["./src/new-design/**", "./src/ui-kit/**"],
      "options": {
        "tailwindConfig": "./tailwind.new-design.config.js"
      }
    }
  ]
}

It'll tell prettier that the config file for any file located in ./src/new-design/** or ./src/ui-kit/** is ./tailwind.new-design.config.js. Otherwise it'll fallback to using tailwind.config.js for the rest of the files.

Hope that helps 👍

[artaommahe]

@thecrypticace is multiple configs support better with tailwind v4?

[thecrypticace]

In v4 you have to specify your stylesheet path in the prettier plugin: https://github.com/tailwindlabs/prettier-plugin-tailwindcss?tab=readme-ov-file#specifying-your-tailwind-stylesheet-path

This is for performance + architectural reasons with how Prettier works.