Prettier-plugin-tailwindcss doesn't work in PhpStorm

Question

I've followed the docs and prettier is installed and working but prettier-plugin-tailwindcss doesn't seem to work, at least when I reformat with Prettier, no Tailwind classes are sorted.

.prettierrc.json:

{
    "trailingComma": "es5",
    "tabWidth": 2,
    "semi": false,
    "singleQuote": true,
    "bracketSpacing": true,
    "bracketSameLine": true,
    "htmlWhitespaceSensitivity": "ignore",
    "printWidth": 80,
    "plugins": [
        "prettier-plugin-tailwindcss"
    ],
    "tailwindConfig": "./tailwind.config.cjs"
}

tailwind.config.cjs:

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ['./src/App.vue', './src/**/*.js', './src/**/*.vue'],
  darkMode: 'class',
  theme: {
    extend: {
      boxShadow: {
        hero: '0 0 10px 0 rgba(0, 0, 0, 0.5)',
        main: '0 0 15px 0 rgba(0, 0, 0, 0.07)',
        'main-hover': '0 0 8px 0 rgba(0, 0, 0, 0.2)',
      },
      fontFamily: {
        josefin: ['Josefin Sans', 'sans-serif'],
      },
      animation: {
        rotate: 'rotate 0.15s ease-out forwards',
        rotateBack: 'rotateBack 0.15s ease-out forwards',
      },
      keyframes: {
        rotate: {
          '0%': { transform: 'rotate(0)' },
          '100%': { transform: 'rotate(180deg)' },
        },
        rotateBack: {
          '0%': { transform: 'rotate(180deg)' },
          '100%': { transform: 'rotate(0)' },
        },
      },
    },
  },
  plugins: [],
}

from package.json:

  "devDependencies": {
    "@types/node": "^20.2.5",
    "@vitejs/plugin-vue": "^4.2.3",
    "autoprefixer": "^10.4.14",
    "postcss": "^8.4.24",
    "prettier": "^2.8.8",
    "prettier-plugin-tailwindcss": "^0.3.0",
    "prettier-plugin-vue": "^1.1.6",
    "tailwindcss": "^3.3.2",
    "typescript": "^5.0.4",
    "unplugin-auto-import": "^0.16.2",
    "unplugin-vue-components": "^0.24.1",
    "vite": "^4.3.9",
    "vite-plugin-pages": "^0.30.1",
    "vue-tsc": "^1.6.5"
  }

I'm using TypeScript and have installed the Prettier plugin.

Answer 1

Working for me perfectly. Make sure you have both "prettier" & "prettier-plugin-tailwindcss" packages installed.

Heres my .prettierrc config thats working with tailwind css auto sort classes

{
  "arrowParens": "always",
  "singleQuote": true,
  "jsxSingleQuote": true,
  "tabWidth": 2,
  "semi": true,
  "bracketSpacing": true,
  "plugins": ["prettier-plugin-tailwindcss"],
  "tailwindConfig": "./tailwind.config.js"
}

Heres my phpstorm prettier settings: prettier-config-phpstorm

Heres my onsave actions: onsave actions phpstorm