Extension formatting conflicts with prettier-plugin-tailwindcss

[bkilrain]

What version of VS Code are you using?

Actually using Cursor - my versions are:

VSCode Version: 1.93.1
Cursor Version: 0.42.3

What version of Tailwind CSS IntelliSense are you using?

v0.12.12

What version of Tailwind CSS are you using?

v3.4.10

What package manager are you using?

npm

What operating system are you using?

MacOS

Tailwind config

import { type Config } from 'tailwindcss'
import animatePlugin from 'tailwindcss-animate'
import radixPlugin from 'tailwindcss-radix'
import { homePreset } from './app/routes/_home+/tailwind-preset'
import { extendedTheme } from './app/utils/extended-theme'

export default {
  content: ['./app/**/*.{ts,tsx,jsx,js}'],
  safelist: ['ml-4', '-indent-4'],
  darkMode: 'class',
  theme: {
    container: {
      center: true,
      padding: '2rem',
      screens: {
        '2xl': '1400px',
      },
    },
    extend: extendedTheme,
  },
  presets: [homePreset],
  plugins: [animatePlugin, radixPlugin],
} satisfies Config

VS Code settings

{
  "workbench.colorTheme": "Monokai",
  "security.workspace.trust.untrustedFiles": "open",
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "eslint.format.enable": true,
  "editor.codeActionsOnSave": {
    "source.fixAll": "explicit"
  },
  "eslint.validate": ["typescript"],
  "editor.detectIndentation": false,
  "editor.insertSpaces": true,
  "editor.tabSize": 2,
  "security.promptForLocalFileProtocolHandling": false,
  "explorer.confirmDelete": false,
  "javascript.updateImportsOnFileMove.enabled": "always",
  "[markdown]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "typescript.updateImportsOnFileMove.enabled": "always",
  "javascript.preferences.autoImportFileExcludePatterns": ["build/"],
  "typescript.preferences.autoImportFileExcludePatterns": ["build/"],
  "typescript.preferences.importModuleSpecifierEnding": "minimal",
  "yaml.format.enable": false,
  "eslint.workingDirectories": ["./"],
  "github.copilot.editor.enableAutoCompletions": true,
  "yaml.customTags": [
    "!And",
    "!And sequence",
    "!If",
    "!If sequence",
    "!Not",
    "!Not sequence",
    "!Equals",
    "!Equals sequence",
    "!Or",
    "!Or sequence",
    "!FindInMap",
    "!FindInMap sequence",
    "!Base64",
    "!Join",
    "!Join sequence",
    "!Cidr",
    "!Ref",
    "!Sub",
    "!Sub sequence",
    "!GetAtt",
    "!GetAZs",
    "!ImportValue",
    "!ImportValue sequence",
    "!Select",
    "!Select sequence",
    "!Split",
    "!Split sequence"
  ],
  "workbench.settings.applyToAllProfiles": [
    "javascript.preferences.importModuleSpecifierEnding",
    "typescript.preferences.importModuleSpecifierEnding"
  ],
  "javascript.suggest.autoImports": false,
  "javascript.preferences.importModuleSpecifierEnding": "minimal",
  "diffEditor.hideUnchangedRegions.enabled": true,
  "workbench.editor.wrapTabs": true,
  "editor.quickSuggestions": {
    "strings": "on"
  },
  "editor.formatOnSave": true
}

Reproduction URL

There is a repro link of the behavior on this comment: tailwindlabs/prettier-plugin-tailwindcss#244 (comment)

Describe your issue

re: tailwindlabs/prettier-plugin-tailwindcss#244

When I disable your extension, the differences in formatting in VSCode and the prettier CLI are gone. This leads me to believe this extension is a source of the unwanted behavior.

Love the extension otherwise, though!

[bkilrain]

Just checked the prerelease version (v0.13.46 (pre-release)) and it seems the bug isn't there. Closing this ticket since it seems it will soon be fixed.