[Feature request] eslint settings config support multiple tailwind config

[Muromi-Rikka]

eslint settings config support multiple tailwind config

{
  "settings": {
    "tailwindcss": {
      "config": ["apps/project1/tailwind.config.js"]
    }
  }
}

[francoismassart]

@Muromi-Rikka can you provide more infos: docs or links, use cases etc. ?

[Muromi-Rikka]

@francoismassart My project is a monorepo project, which has multiple tailwind.config.js, but the configuration file can only specify a single configuration

[francoismassart]

I guess you could define several parts inside your eslintrc file or even use different eslintrc files pointing each to its related files and tailwind config... I can give it a shot if you take the time to provide a simple demo project with 2apps and 2 configs.

[francoismassart]

@Muromi-Rikka
here is an example, there might be other ways to do it too.

app-one

// .eslintrc.js of app-one
const path = require('path');
module.exports = {
  settings: {
    tailwindcss: {
      config: path.join(__dirname, "tailwind.config-one.js"),
    }
  }
};

// tailwind.config-one.js
/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./src/**/*.{php,html,tsx,vue}"],
  theme: {
    extend: {
      colors: {
        one: '#B4D455'
      }
    },
  },
  plugins: [],
}

app-two

// .eslintrc.js of app-two
const path = require('path');
module.exports = {
  settings: {
    tailwindcss: {
      config: path.join(__dirname, "tailwind.config-two.js"),
    }
  }
};

// tailwind.config-two.js
/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./src/**/*.{php,html,tsx,vue}"],
  theme: {
    extend: {
      colors: {
        two: '#B4D455'
      }
    },
  },
  plugins: [],
}

Clone this branch https://github.com/francoismassart/demo-eslint-plugin-tailwindcss/tree/multiple-apps

npm i and try running npm run lint

=>

Notice app-one accepts text-one and raises a warning for text-two as custom-classname
Notice app-two accepts text-two and raises a warning for text-one as custom-classname

I have 3 eslintrc files:

• shared rc
• app-one rc
• app-two rc

Take a look at them to see how they work together

[francoismassart]

If this helped you out, please share the project on social medias 😉

[Muromi-Rikka]

Thanks, but I currently only have one eslintrc configuration, I think I may need to modify the lint detection

[francoismassart]

Just add the additional eslintrc files is your different apps folder, eslint will "look up" for extra eslintrc files next to the current parsed file and up...

The deeper the eslintrc file is, the stronger its settings are reflected.

At the end, eslint merges all the rc files it found together