ixartz/Next-js-Boilerplate

Consistent Issue: Invalid Tailwind CSS classnames order

aceaspades-worldspark opened this issue · 12 comments

aceaspades-worldspark commented

Every time I save the file, the order of Tailwind CSS classnames are automatically changed, even when they are correct. Like, every time. And each save scrambles them in an incorrect order.

Here's my .eslintrc:

{
  // Configuration for JavaScript files
  "extends": [
    "airbnb-base",
    "next/core-web-vitals", // Needed to avoid warning in next.js build: 'The Next.js plugin was not detected in your ESLint configuration'
    "plugin:prettier/recommended"
  ],
  "rules": {
    "prettier/prettier": [
      "error",
      {
        "singleQuote": true,
        "endOfLine": "auto"
      }
    ]
  },
  "overrides": [
    // Configuration for TypeScript files
    {
      "files": ["**/*.ts", "**/*.tsx"],
      "plugins": [
        "@typescript-eslint",
        "unused-imports",
        "tailwindcss",
        "simple-import-sort"
      ],
      "extends": [
        "plugin:tailwindcss/recommended",
        "airbnb-typescript",
        "next/core-web-vitals",
        "plugin:prettier/recommended"
      ],
      "parserOptions": {
        "project": "./tsconfig.json"
      },
      "rules": {
        "prettier/prettier": [
          "error",
          {
            "singleQuote": true,
            "endOfLine": "auto"
          }
        ],
        "react/destructuring-assignment": "off", // Vscode doesn't support automatically destructuring, it's a pain to add a new variable
        "jsx-a11y/anchor-is-valid": "off", // Next.js use his own internal link system
        "react/require-default-props": "off", // Allow non-defined react props as undefined
        "react/jsx-props-no-spreading": "off", // _app.tsx uses spread operator and also, react-hook-form
        "react-hooks/exhaustive-deps": "off", // Incorrectly report needed dependency with Next.js router
        "@next/next/no-img-element": "off", // We currently not using next/image because it isn't supported with SSG mode
        "@typescript-eslint/comma-dangle": "off", // Avoid conflict rule between Eslint and Prettier
        "@typescript-eslint/consistent-type-imports": "error", // Ensure `import type` is used when it's necessary
        "import/prefer-default-export": "off", // Named export is easier to refactor automatically
        "tailwindcss/classnames-order": [
          "warn",
          {
            "officialSorting": true
          }
        ], // Follow the same ordering as the official plugin `prettier-plugin-tailwindcss`
        "simple-import-sort/imports": "error", // Import configuration for `eslint-plugin-simple-import-sort`
        "simple-import-sort/exports": "error", // Export configuration for `eslint-plugin-simple-import-sort`
        "@typescript-eslint/no-unused-vars": "off",
        "unused-imports/no-unused-imports": "error",
        "unused-imports/no-unused-vars": [
          "error",
          { "argsIgnorePattern": "^_" }
        ]
      }
    },
    // Configuration for testing
    {
      "files": ["**/*.test.ts", "**/*.test.tsx"],
      "plugins": ["jest", "jest-formatting", "testing-library", "jest-dom"],
      "extends": [
        "plugin:jest/recommended",
        "plugin:jest-formatting/recommended",
        "plugin:testing-library/react",
        "plugin:jest-dom/recommended"
      ]
    }
  ]
}
amunrarara commented

Following!

ixartz commented

@aceaspades-worldspark, thank you for creating this issue. Yes, the Next.js boilerplate comes up with https://www.npmjs.com/package/eslint-plugin-tailwindcss, it's a Eslint plugin and it can automatically reorder your tailwind CSS classes. So, your code is more consistent and more easy to track on Git. If you don't like this behavior, you can disable it without any issue.

  • 👍1
amunrarara commented
aceaspades-worldspark commented
ixartz commented

@amunrarara @aceaspades-worldspark, I'm using on my own project and it works perfectly.

Do you see the same behavior for a clean and fresh project using Next.js boilerplate?

ixartz commented

@amunrarara @aceaspades-worldspark, do you have the chance to try it on a clean and fresh project? Currently, I'm not able to reproduce the issue.

aceaspades-worldspark commented
  • 👍1
RangerCoder99 commented

You likely using vscode with one vscode plugin that sort your css classes on save, that counters the order of the tailwind prettier plugin.

ixartz commented

I'm closing the issue: I'm not able to reproduce the issue and without any response.

Please open a new issue if you the problem occurs again.

  • 👍1
amunrarara commented

You likely using vscode with one vscode plugin that sort your css classes on save, that counters the order of the tailwind prettier plugin.

This was the correct answer. Thank you for looking into it, and sorry for the delay in response.

  • 👍1
ixartz commented

@amunrarara Thank you for taking the time to share the correct response. It'll help other in the same situation.

  • 👍1
FrancescoSaverioZuppichini commented

having similar issue, what was your exact solution? Thanks