[Prettier Plugin]

[scott-stoltz]

I've got a project using Astro. I have prettier 3.5.3 set up and it's working as expected on .astro files for TS and HTML formatting. I'd like to use the prettier-plugin-tailwindcss to auto sort classes, but I can't get it to work. I've followed various instructions on how to set it up and none of them work. The sorting never happens, but usually, after setting it up, the TS formatting breaks as well.

A lot of the help I'm finding online is at least a year old and I know that Tailwind 4 is newer than that, so perhaps there's something I need to do differently that I'm not finding.

[rozsazoltan]

Based on the documentation in the repository, it works correctly for me.

When using Tailwind CSS v4 you must specify your CSS file entry point, which includes your theme, custom utilities, and other Tailwind configuration options. To do this, use the tailwindStylesheet option in your Prettier configuration.

Note that paths are resolved relative to the Prettier configuration file.

// .prettierrc
{
  "tailwindStylesheet": "./resources/css/app.css"
}

• Specifying your Tailwind stylesheet path (Tailwind CSS v4+)

For special cases, you can add the following 3 settings:

• Sorting non-standard attributes
• Sorting classes in function calls
• Sorting classes in template literals

If it still doesn't work, sharing a minimal reproduction might help.

[scott-stoltz]

I added the reference to the tailwind stylesheet and it's still not working.

Here's the packages I have installed:

"dependencies": {
    "@tailwindcss/vite": "^4.1.4",
    "astro": "^5.7.13",
    "astrobook": "^0.8.1"
  },
  "devDependencies": {
    "prettier": "^3.5.3",
    "prettier-plugin-tailwindcss": "^0.6.12",
    "style-dictionary": "^4.4.0",
    "style-dictionary-utils": "^4.0.5"
  }

.prettier.config.mjs:

export default {
  singleQuote: true,
  bracketSameLine: true,
  jsxBracketSameLine: true,
  printWidth: 120,
  htmlWhitespaceSensitivity: "strict",
  singleAttributePerLine: true,
  tailwindStylesheet: "./src/styles/global.css",
  plugins: ["prettier-plugin-astro", "prettier-plugin-tailwindcss"],
  overrides: [
    {
      files: "*.astro",
      options: {
        parser: "astro",
      },
    },
  ],
};

vscode settings:

{
  "editor.formatOnSave": true,
  "tailwindCSS.colorDecorators": true,

  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[typescript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[json]": {
    "editor.quickSuggestions": {
      "strings": true
    },
    "editor.suggest.insertMode": "replace",
    "gitlens.codeLens.scopes": ["document"],
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  }
}

TypeScript and HTML are being formatted correctly in .astro files, but tailwind class names are not sorted.

I'm in VSCode, using the Astro extension. @rozsazoltan, let me know if see anything that varies from your set up. Thanks.

[scott-stoltz]

I go this working. I had to add the path to my prettier config in my .vscode/setttings.json file.