Conflict in class order between `eslint` and `prettier`
LouisCuvelier opened this issue · 2 comments
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 !
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:
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 !