[BUG] Support eslint's new config file (flat) for recommended rules

[beorn]

When using eslint's new config file format, such as this eslint.config.js:

import tw from "eslint-plugin-tailwindcss"

export default [
  tw.configs.recommended
]

Errors out:

Oops! Something went wrong! :( ESLint: 8.50.0 A config object has a "plugins" key defined as an array of strings. Flat config requires "plugins" to be an object in this form: { plugins: { tailwindcss: pluginObject } } Please see the following page for information on how to convert your config object into the correct format: https://eslint.org/docs/latest/use/configure/migration-guide#importing-plugins-and-custom-parsers If you're using a shareable config that you cannot rewrite in flat config format, then use the compatibility utility: https://eslint.org/docs/latest/use/configure/migration-guide#using-eslintrc-configs-in-flat-config

Is there a way to add recommended tailwind rules using ESlint's new config format?

[francoismassart]

Hi @beorn The plugin doesn't support the new config format yet. Do you use other 3rd party eslint linter which support it so that I can see how to implement it ?

[Sun-ZhenXing]

Hi, @beorn According to the documentation, I tried the following and it worked.

npm install @eslint/eslintrc --save-dev

eslint.config.js:

import { FlatCompat } from '@eslint/eslintrc'

const compat = new FlatCompat()

export default [
  // mimic ESLintRC-style extends
  ...compat.extends({
    extends: ['plugin:tailwindcss/recommended'],
    rules: {
      'tailwindcss/no-custom-classname': 'off',
      'tailwindcss/migration-from-tailwind-2': 'off',
    },
  }),
]

[awdr74100]

Hi @francoismassart The @antfu/eslint-config widely used in vue or nuxt is flat style, maybe you can refer to how he does the convert? It would be great to be able to combine them!

[Sun-ZhenXing]

@awdr74100, this is my temporary method.

https://github.com/Sun-ZhenXing/algo-code-mgr/blob/main/eslint.config.js

[beorn]

@Sun-ZhenXing Yes, thanks, it seems like using FlatCompat.compat is the best way currently. Ideally there should be some mention of this in the docs and/or useful error/warning messages when you do it wrong.

[thenbe]

A migration guide has been added to eslint's docs: https://eslint.org/docs/latest/extend/plugin-migration-flat-config

[itpropro]

We only use project that use eslint flat config at this point, any updates to this being supported?

[kachkaev]

@itpropro you can use this workaround: https://github.com/francoismassart/eslint-plugin-tailwindcss/issues/280#issuecomment-1746781848. There is no need to wait till all plugins have migrated to flat config.

[irg1008]

Be careful you need to use ...compat.config({...}) and not ...compat.extends({...})

[tylerolson]

@Sun-ZhenXing I can't seem to get @antfu/eslint-config to work with tailwind class sorting in .vue files. I've tried everything, is there anything special you did?

[DavidDeSloovere]

Here's my config, using antfu's v2.11 eslint config

// https://github.com/antfu/eslint-config#customization
import antfu from "@antfu/eslint-config";

// workaround for flat config not being supported yet by eslint-plugin-tailwindcss
// https://github.com/francoismassart/eslint-plugin-tailwindcss/issues/280
import { FlatCompat } from "@eslint/eslintrc";

const compat = new FlatCompat();

export default antfu(
  {
    // Customize the stylistic rules
    stylistic: {
      quotes: "double", // or 'double'
      semi: true,
    },
    rules: {
      // Changing the default, we don't like this because when you rename ie. a field then things break
      "object-shorthand": ["warn", "never"],

      // We like our curly braces. Always.
      "curly": ["warn", "all"],

      // Keep line length below 120 characters
      "max-len": ["error", { code: 120 }],

      // Experimenting too much for now.
      // TODO evaluate if we need to enable this again
      "no-console": "warn",
    },
    formatters: {
      graphql: "prettier",
      css: "prettier",
      markdown: "prettier",
      html: "prettier",
      prettierOptions: {
      },
    },
  },
  {
    files: ["*.json"],
    rules: {
      "max-len": "off",
    },
  },
  ...compat.config({
    // https://github.com/francoismassart/eslint-plugin-tailwindcss
    extends: ["plugin:tailwindcss/recommended"],
    rules: {
      "tailwindcss/no-custom-classname": "off",
    },
  }),
  {
    ignores: ["**/generated.*", "**/locales/generated/**"],
  },
);

[tylerolson]

Tailwindcss errors/warnings appear when I manually run eslint . but do not appear in vscode no matter what I try. General eslint and vue errors appear. This means that tailwind auto sorting is only working when I manually run eslint . --fix

My package.json has these scripts:

"lint": "eslint .",
"lint:debug": "eslint . --debug",
"lint:fix": "eslint . --fix"

Seems to be a vscode errors, Ive tried literally everything.

Edit:

It seems I am finding an issue between the Eslint Vscode extention and using this plugin in flat style. I am able to get it fully working using old .cjs without @antfu/eslint-config, however the Vscode extension seems to completely ignores that plugin, formatting everything else.

[DavidDeSloovere]

I have this, and many other changes, in .vscode/settings.json - maybe that's the missing piece

{
  /****************************************
   * Ant Fu eslint
   ****************************************/
  // https://github.com/antfu/eslint-config#vs-code-support-auto-fix
  // Enable the ESlint flat config support
  "eslint.experimental.useFlatConfig": true,
  ..........
}

[tylerolson]

Still can't get eslint-plugin-tailwindcss to show up in vscode. Not sure if I should keep trying, make a new issue, or be stuck with prettier.

[romansp]

@tylerolson it definitely works in VS Code via compat as already confirmed by several others in this thread.

It's hard to help you without seeing the full code of your configuration. Please submit a minimal repro.

[vinavinas]

Still can't get eslint-plugin-tailwindcss to show up in vscode. Not sure if I should keep trying, make a new issue, or be stuck with prettier.

I was using eslint@^9.0.0 with FlatCompat when I encountered the same issue. I reverted to eslint@^8.0.0 (v8.57.0; with FlatCompat) and it worked fine so it seems to be an issue that occurred with the latest eslint version.

[grokpot]

Just some stranger on the internet here to say thanks to all of you above - this is such a niche issue ("I want to sort my TailwindCSS classes with Antfu, but Antfu and Tailwind had a public falling out so there's no official support and now I'm down into a github issue")

And it works! This is what makes the internet great. Thanks everyone!