[Prettier Plugin] : How to pass tailwindConfig from root to all my projects in monorepo

[berkaycirak]

Hi, I have a monorepo in which there are more than one project using tailwindcss. In my root file, I set my .prettierrc file as like

{
  "plugins": ["prettier-plugin-tailwindcss"],
  "tailwindConfig": "apps/*/tailwind.config.js",
  "tabWidth": 2,
  "singleQuote": true
}

However, there is no configuration such as apps/*/tailwind.config.js. In my app, folder structure like below and I need help to apply that prettier-tailwind-plugin to all my projects from my root

 App
   /project1
      //tailwind.config.js
   /project2 
       //tailwind.config.js
   /project3
       ///tailwind.config.js

[maybebansky]

@berkaycirak did you ever find the solution?

[KaloudasDev]

Hello! The Prettier Tailwind plugin doesn't support glob patterns in the tailwindConfig path. Here are the working solutions:

Solution 1: Project-Level Prettier Configuration
Each project should have its own .prettierrc file:

// apps/project1/.prettierrc
{
  "plugins": ["prettier-plugin-tailwindcss"],
  "tailwindConfig": "./tailwind.config.js",
  "tabWidth": 2,
  "singleQuote": true
}

Solution 2: Root Prettier Config with Workspace Overrides

// Root .prettierrc
{
  "tabWidth": 2,
  "singleQuote": true,
  "plugins": ["prettier-plugin-tailwindcss"]
}

Then in each project, extend and specify the Tailwind config:

// apps/project1/.prettierrc
{
  "extends": "../../.prettierrc",
  "tailwindConfig": "./tailwind.config.js"
}

Solution 3: Script-Based Approach
Create a script that runs Prettier with the correct config for each project:

// scripts/format.js
const { execSync } = require('child_process');

const projects = ['project1', 'project2', 'project3'];

projects.forEach(project => {
  console.log(`Formatting ${project}...`);
  execSync(`prettier --write "apps/${project}/**/*.{js,ts,jsx,tsx}" --config apps/${project}/.prettierrc`, {
    stdio: 'inherit'
  });
});

Solution 4: Package.json Scripts
In your root package.json:

{
  "scripts": {
    "format:project1": "prettier --write \"apps/project1/**/*.{js,ts,jsx,tsx}\" --config apps/project1/.prettierrc",
    "format:project2": "prettier --write \"apps/project2/**/*.{js,ts,jsx,tsx}\" --config apps/project2/.prettierrc",
    "format:all": "npm run format:project1 && npm run format:project2 && npm run format:project3"
  }
}

Solution 5: Using Prettier's API Programmatically
For advanced monorepo setups:

// scripts/format-monorepo.js
const prettier = require('prettier');
const fs = require('fs');
const path = require('path');

const projects = ['project1', 'project2', 'project3'];

projects.forEach(project => {
  const configPath = path.join(__dirname, `../apps/${project}/.prettierrc`);
  const config = JSON.parse(fs.readFileSync(configPath, 'utf8'));
});

The most maintainable approach is Solution 2 with project-level configuration files that extend the root Prettier config, as it provides both consistency and project-specific Tailwind configuration.