Support single prettier config but multiple tailwind apps

[mircoba]

We are facing an issue integrating this plugin into our nx workspace. In our scenario we are mainting multiple applications in a mono repository. Each of the applications may define its own tailwind.config.*. But we are using a single workspace-wide .prettierrc. Therefore we can not point this plugin to a specific tailwind.config.* in our configuration.

In https://github.com/tailwindlabs/prettier-plugin-tailwindcss/blob/main/src/config.js#L159 a fallback mechanism is implemented that traverses the directory tree upwards in search for a tailwind.config.*. This implementation currently uses baseDir as its origin. By changing the origin to options.filePath we traverse the directory tree upwards from the file to be formatted. This allows a per project configuration of tailwind in a mono repository.

This simple change makes the plugin useable in our context. But what do you think? Could this have a negative side-effect?

[thecrypticace]

I think this is a reasonable change. I'll need to think through any potential b/c issues in case this needs to be released as v0.6.0. We also might want to do this for implicit config lookup and not just when using tailwindConfig in the prettier config. We also will maybe want to fallback to base dir if filepath is undefined (can happen in programmatic uses of Prettier).

I'll take a look at this some time this afternoon!

[mircoba]

Thanks! I've added the fallback as well. We already use this patch on top of v0.4.1

[flowreaction]

We are also having a similar issue which would be fixed by this change. Additionally I would like to propose a similar config option to what the Tailwind vscode intellisense extension has, which is a mapping of glob patterns to tailwind config files like this:

"configPath": {
  "./packages/A/tailwind.config.ts": "packages/A/**"
  "./packages/shared/tailwind.config.ts": ["packages/B/**", "packages/C/**"]
}

[thecrypticace]

@flowreaction Prettier itself supports this with configuration overrides. No additional config options needed.

You should be able to use a config that looks something like this:

{
  // …
  "overrides": [
    {
      "files": "packages/A/**",
      "options": {
        "tailwindConfig": "./packages/A/tailwind.config.ts"
      }
    },
    {
      "files": ["packages/B/**", "packages/C/**"],
      "options": {
        "tailwindConfig": "./packages/shared/tailwind.config.ts"
      }
    }
  ]
}

[thecrypticace]

@mircoba I haven't forgotten about this change btw. Just been super busy. I plan to look at this again soon (though it might wait until after React conf)

[flowreaction]

@flowreaction Prettier itself supports this with configuration overrides. No additional config options needed.

You should be able to use a config that looks something like this:

{
  // …
  "overrides": [
    {
      "files": "packages/A/**",
      "options": {
        "tailwindConfig": "./packages/A/tailwind.config.ts"
      }
    },
    {
      "files": ["packages/B/**", "packages/C/**"],
      "options": {
        "tailwindConfig": "./packages/shared/tailwind.config.ts"
      }
    }
  ]
}

Awesome, thanks for sharing this! 🙏