tailwindlabs / prettier-plugin-tailwindcss

A Prettier plugin for Tailwind CSS that automatically sorts classes based on our recommended class order.
MIT License
5.67k stars 134 forks source link

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

Closed berkaycirak closed 5 months ago

berkaycirak commented 5 months ago

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
thecrypticace commented 5 months ago

Hey! You can use Prettier's configuration overrides feature for this:

{
  // …
  "overrides": [
    {
      "files": "App/project1/**",
      "options": {
        "tailwindConfig": "./App/project1/tailwind.config.ts"
      }
    },
    {
      "files": "App/project2/**",
      "options": {
        "tailwindConfig": "./App/project2/tailwind.config.ts"
      }
    },
    {
      "files": "App/project3/**",
      "options": {
        "tailwindConfig": "./App/project3/tailwind.config.ts"
      }
    }
  ]
}

This way you can have different settings for different sets of files.