Conflict in class order between eslint and prettier

[LouisCuvelier]

What version of prettier-plugin-tailwindcss are you using?

0.6.1

What version of Tailwind CSS are you using?

3.4.3

What version of Node.js are you using?

21.7.1

What package manager are you using?

npm

What operating system are you using?

macOS

Describe your issue

In a .tsx file, prettier is ordering in this order : text-2xs mx-1.5 mb-0.5 py-1.
But eslint is complaining :

112:12  Error: Replace `text-2xs·mx-1.5·mb-0.5·py-1` with `mx-1.5·mb-0.5·py-1·text-2xs`  prettier/prettier

text-2xs is an extend of Tailwind theme inside tailwind.config.js

import type { Config } from "tailwindcss";

const config: Config = {
  content: [
    "./pages/**/*.{js,ts,jsx,tsx,mdx}",
    "./components/**/*.{js,ts,jsx,tsx,mdx}",
    "./app/**/*.{js,ts,jsx,tsx,mdx}",
  ],
  theme: {
    extend: {
      fontSize: {
        "2xs": ["0.625rem", "0.75rem"],
      },
    },
  },
};
export default config;

.prettierrc

{
  "plugins": ["prettier-plugin-tailwindcss"],
  "tailwindAttributes": [".*Classes.*"],
  "tailwindFunctions": ["clsx", "tv", "cva"]
}

.eslintrc

{
  "extends": [
    "next/core-web-vitals",
    "plugin:prettier/recommended",
    "plugin:storybook/recommended",
    "plugin:react-hooks/recommended",
    "eslint:recommended",
    "plugin:@typescript-eslint/recommended",
    "plugin:tailwindcss/recommended"
  ],
  "plugins": ["@typescript-eslint", "react-compiler"],
  "parser": "@typescript-eslint/parser",
  "root": true
}

It's maybe linked to #270 ?

Thanks !

[adamwathan]

Hey! It seems like our Prettier plugin isn't noticing your config file, is it in a non-standard location?

You might need to configure your config path with this option:

https://github.com/tailwindlabs/prettier-plugin-tailwindcss/?tab=readme-ov-file#customizing-your-tailwind-config-path

[LouisCuvelier]

Hey,
No, tailwind.config.ts is located at the root, same as .prettierrc.
But, I re-tested this morning and it's magically solved ...

For the background, the font-size class was created in a plugin config like this and I tried to use it just after (without restarting Webstorm, or my computer). So, maybe a computer restart was the solution to let eslint and prettier understand that ?

require("tailwindcss-fluid-type")({
      settings: {
        fontSizeMin: 1, // 1.125rem === 18px
        fontSizeMax: 1.25, // 1.25rem === 20px
        ratioMin: 1.125, // Multiplicator Min
        ratioMax: 1.2, // Multiplicator Max
        screenMin: 20, // 20rem === 320px
        screenMax: 96, // 96rem === 1536px
        unit: "rem", // default is rem but it's also possible to use 'px'
        prefix: "", // set a prefix to use it alongside the default font sizes
        extendValues: true, // When you set extendValues to true it will extend the default values. Set it to false to overwrite the values.
      },
      values: {
        "3xs": [-4, 1.6],
        "2xs": [-3, 1.6],
        xs: [-2, 1.6],
        sm: [-1, 1.6],
        base: [0, 1.6],
        lg: [1, 1.6],
        xl: [2, 1.2],
        "2xl": [3, 1.2],
        "3xl": [4, 1.2],
        "4xl": [5, 1.1],
        "5xl": [6, 1.1],
        "6xl": [7, 1.1],
        "7xl": [8, 1],
        "8xl": [9, 1],
        "9xl": [10, 1],
      },
    }),

I tried to reproduce but impossible. Closing for now then.

Thanks !