Handling multiple TW configs (e.g. monorepo) about prettier-plugin-tailwindcss HOT 2 CLOSED

Hey! Prettier already supports using a different config in each directory I think doesn't it? Does it work if you just add a pretter.config.js file to each subdirectory that needs to specify the Tailwind config?

from prettier-plugin-tailwindcss.

Hey @gekkedev. It is not possible for plugins to provide Prettier configuration options that accept array or object values, so I'm not sure how we would provide something like this. Also, as Adam said, you can already achieve this using multiple Prettier config files, for example:

my-app/
├─ project-1/
│  ├─ prettier.config.js
│  ├─ tailwind.config.js
├─ project-2/
│  ├─ prettier.config.js
├─ project-3/
│  ├─ tailwind.config.js

// project-1/prettier.config.js
module.exports = {
  tailwindConfig: './tailwind.config.js',
}

// project-2/prettier.config.js
module.exports = {
  tailwindConfig: '../project-3/tailwind.config.js',
}

If you want to share common options you could create a config in the root that you import into each project's config:

// prettier.config.js
module.exports = {
  singleQuote: true,
}

// project-1/prettier.config.js
module.exports = {
  ...require('../prettier.config.js'),
  tailwindConfig: './tailwind.config.js',
}

// project-2/prettier.config.js
module.exports = {
  ...require('../prettier.config.js'),
  tailwindConfig: '../project-3/tailwind.config.js',
}

Also, with this kind of setup you don't need to run Prettier separately in each directory. Prettier will automatically use the correct config for each file based on its path. For example project-1/example.html will use project-1/prettier.config.js and project-2/example.html will use project-2/prettier.config.js

I hope that helps!

from prettier-plugin-tailwindcss.