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

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?

About this issue

Original URL
State: open
Created 9 months ago
Reactions: 13
Comments: 17 (2 by maintainers)

Most upvoted comments

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!

grokpot on Apr 21, 2024

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!

awdr74100 on Oct 6, 2023

@awdr74100, this is my temporary method.

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

Sun-ZhenXing on Oct 7, 2023

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.

vinavinas on Apr 22, 2024

@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?

tylerolson on Apr 1, 2024

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

thenbe on Nov 4, 2023

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/**"],
  },
);

DavidDeSloovere on Apr 1, 2024

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

irg1008 on Mar 22, 2024