[Prettier Plugin] [v4] Sort order of custom utilities sorted to the front

[lstephensca]

package.json:

  "dependencies": {
    "next": "14.2.8",
    "react": "^18",
    "react-dom": "^18"
  },
  "devDependencies": {
    "@tailwindcss/postcss": "4.0.0-alpha.23",
    "@types/node": "^20",
    "@types/react": "^18",
    "@types/react-dom": "^18",
    "eslint": "^8",
    "eslint-config-next": "14.2.8",
    "prettier": "^3.3.3",
    "prettier-plugin-tailwindcss": "^0.6.6",
    "tailwindcss": "4.0.0-alpha.23",
    "typescript": "^5"
  }
}

I was testing out the latest alpha release of v4 the other day and just wanted a sanity check. I added a few variables to my @theme to test things out:

@theme {
  --width-8xl: 90rem;
  --color-neon-pink: oklch(71.7% 0.25 360);
}

Now, in my page.tsx in Nextjs, if I do <main className="bg-neon-pink max-w-8xl h-screen max-w-7xl py-4"></main> intellisense will not provide any warnings of a conflict with my two max-w-* classes. However, if I add a prebuilt background color, then intellisense will pick up both the color and width conflicts. Additionally, I noticed that classes coming from my custom properties are all sorted first which isn't a huge issue, but I just wanted to make sure that this was the intended behavior.

Thankfully, I am testing the waters in a non-critical project, but I just wanted to be aware of any type of conflicts due to the sort order ahead of time.

[adamwathan]

Hey! At the moment at least you need to configure the path to your CSS file when using v4 with the Prettier plugin:

tailwindlabs/prettier-plugin-tailwindcss#249

Hopefully something we can make automatic at some point though if we can crack it.

IntelliSense should detect your CSS file automatically though and report the conflicts — are you on the latest version of the extension?

[lstephensca]

I have been scouring every issue and youtube video looking for the fix for that, but I am sorry that I missed it! Adding the tailwindEntryPoint fixed the issue immediately!

I am on the latest version of the extension which did show some errors with class conflicts. However, it seemed to be a bit spotty.

For example, If I had a custom width property and a default width property max-w-8xl ,max-w-7xl, IntelliSense would not underline or report any issues. If I also added a custom color property with a default color bg-slate-900. then IntelliSense would flag all 4. Once I removed one of the conflicting color classes, then it would ignore the widths again.

[thecrypticace]

This definitely seems like a bug in intellisense. I've opened an issue as a reminder for me to take a look later: tailwindlabs/tailwindcss-intellisense#1047