Skip to content

Support single prettier config but multiple tailwind apps#243

Closed
mircoservices wants to merge 1 commit intotailwindlabs:mainfrom
mircoservices:feat/scan-for-tailwindconfig-from-file-being-formatted
Closed

Support single prettier config but multiple tailwind apps#243
mircoservices wants to merge 1 commit intotailwindlabs:mainfrom
mircoservices:feat/scan-for-tailwindconfig-from-file-being-formatted

Conversation

@mircoservices
Copy link

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 thecrypticace self-assigned this Jan 24, 2024
@thecrypticace
Copy link
Contributor

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!

@mircoservices mircoservices force-pushed the feat/scan-for-tailwindconfig-from-file-being-formatted branch from 4c6ff77 to 90f7fc6 Compare January 24, 2024 13:02
@mircoservices
Copy link
Author

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

@flowreaction
Copy link

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
Copy link
Contributor

@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
Copy link
Contributor

@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
Copy link

@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! 🙏

@thecrypticace
Copy link
Contributor

I ended up redoing the config and package resolution for v0.7.x so this is handled automatically and will be addressed with v0.7.0.

I've also decided to make this behavior the only behavior rather than a configurable one as it shouldn't affect most projects and for monorepos things should just work better automatically.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants