prettier-plugin-tailwindcss: Sorting with external plugins like Svelte, Astro, etc… not working when using Prettier v3

What version of prettier-plugin-tailwindcss are you using? v0.4.1

What version of Tailwind CSS are you using? v3.3.3

What version of Node.js are you using? v18.16.1

What package manager are you using? npm

What operating system are you using? Windows

package.json:

"devDependencies": {
    "@sveltejs/adapter-auto": "^2.0.0",
    "@sveltejs/adapter-static": "^2.0.2",
    "@sveltejs/kit": "^1.22.3",
    "@tailwindcss/forms": "^0.5.4",
    "autoprefixer": "^10.4.14",
    "eslint": "^8.45.0",
    "eslint-config-prettier": "^8.5.0",
    "eslint-plugin-svelte": "^2.31.1",
    "postcss": "^8.4.26",
    "prettier": "^3.0.0",
    "prettier-plugin-svelte": "^3.0.0",
    "prettier-plugin-tailwindcss": "^0.4.1",
    "svelte": "^4.0.5",
    "tailwindcss": "^3.3.3",
    "vite": "^4.4.4"
  },

settings.json:

{
  <...>
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "prettier.documentSelectors": ["**/*.svelte"],
  "prettier.requireConfig": true,
  "[svelte]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  }
}

.prettierrc:

{
  "useTabs": false,
  "singleQuote": true,
  "semi": true,
  "trailingComma": "all",
  "arrowParens": "avoid",
  "printWidth": 100,
  "plugins": ["prettier-plugin-svelte", "prettier-plugin-tailwindcss"],
  "pluginSearchDirs": false,
  "overrides": [
    {
      "files": "**/*.svelte",
      "options": {
        "parser": "svelte"
      }
    }
  ]
}

tailwind.config.js:

/** @type {import('tailwindcss').Config} */
const defaultTheme = require('tailwindcss/defaultTheme');

export default {
  content: ['./src/**/*.{html,js,svelte,ts}'],
  theme: {
    extend: {
      maxWidth: {
        '8xl': '120rem',
      },
      fontFamily: {
        sans: ['Inter var', ...defaultTheme.fontFamily.sans],
      },
    },
  },
  plugins: [require('@tailwindcss/forms')],
};

Hi! I’m encountering an issue while setting up the prettier-plugin-tailwindcss and prettier-plugin-svelte plugins for my Svelte app. The problem is that the tailwind classes are not being sorted, even though the prettier-plugin-svelte is functioning correctly for other formatting aspects like tabs, quotes, and empty lines.

Tailwind config is located in in the root folder, along with the rest of the configs,
Prettier debug output does not give explicit reasons.
I have tried to reinstall dependencies, restart the VSCode,
Both the “format on save” option and the npx prettier --write . command produce the same result, with no sorting of tailwind classes.

Any guidance or advice on resolving this issue would be greatly appreciated.

About this issue

Original URL
State: closed
Created a year ago
Reactions: 28
Comments: 29 (8 by maintainers)

Most upvoted comments

Short update here:

I’ve got a prototype version of the v3 plugin with support Astro, Svelte, and other plugins. We’ve had to switch to using ESM for v3 because we have to use top-level await to dynamically load plugins that we have compatibility with. This is because some of them have switched to ESM which means dynamic imports return promises (… ESM really should have had a sync dynamic import primitive — at least for node 😕).

I’m currently running into issues with the vscode prettier extension loading the wrong version of the plugin so it doesn’t look like I’ll get a release out today — sorry. But it is being worked on! 😃

+29

thecrypticace on Jul 25, 2023

Hey all! I pushed out an insiders build that enables support for plugins!

There are two important things to note:

It supports Prettier v3+ only — ultimately we couldn’t find a way to support both v2 and v3 within the same plugin and have it work with some external tools
Most but not all plugins that were supported in v2 work. Marko and Twig support have been removed as they don’t support v3 currently. If they get updates to support Prettier v3 in the future we’ll look into it.

I’ve done a good bit of testing myself and things appear to work but it would be great if you all could test our insiders build in whatever tooling you’re using and report back! Also, if you’re using VSCode, be sure to reload VSCode after upgrading any prettier plugins.

npm install prettier-plugin-tailwindcss@insiders

+16

thecrypticace on Aug 9, 2023

Hi! When we released v3 Svelte, Astro, and all suppored plugins from v2 (as far as I know) had not yet updated. We temporarily disabled support for external plugins because of this — when using v3 only (because there’s no way we would be able to shim v2 -> v3 for external plugins).

I’m taking a look at all our previously supported plugins on Monday and will try to get a release out Monday/Tuesday with any that have updated.

+11

thecrypticace on Jul 20, 2023

This is what I did in case someone else wants to give it a try:

Update prettier to v3
Update all the plugins prettier-plugin-svelte, prettier-plugin-organize-imports and prettier-plugin-tailwindcss to their latest (prettier v3 compatible) versions
Remove "pluginSearchDirs": false from the prettier config
Change the package.json script to "format": "prettier --plugin=prettier-plugin-svelte --plugin=prettier-plugin-organize-imports --plugin=prettier-plugin-tailwindcss --write ."

Then when I run the format command it works for svelte files but it does not run the other plugins on svelte files. Imports and tailwind are not updating on my tests.

+10

juanpujol on Jul 19, 2023

I can also comfirm that it is working in VSCode after restart with

		"prettier": "^3.0.1",
		"prettier-plugin-svelte": "^3.0.3",
		"prettier-plugin-tailwindcss": "0.0.0-insiders.ac70a66",

and

	"plugins": ["prettier-plugin-svelte", "prettier-plugin-tailwindcss"],
	"overrides": [{ "files": "*.svelte", "options": { "parser": "svelte" } }]

in .prettierrc

Also changed the format run script to: "format": "prettier --plugin=prettier-plugin-svelte --plugin=prettier-plugin-tailwindcss --write .",

delight on Aug 9, 2023

Hey all I’ve published v0.5.0 which mirrors the insiders build published yesterday — as such I’m closing this issue given that things seem to be working for everyone in most cases! Thanks for giving it a test — much appreciated!

thecrypticace on Aug 10, 2023

@delight @baresi687 Prettier autoloading was removed with Prettier v3 meaning that you must specify all plugins explicitly. The --plugin-search-dir / pluginSearchDirs options no longer exist in Prettier.

thecrypticace on Aug 9, 2023

@delight

I also had to change the format script to: "format": "prettier --write . --plugin=prettier-plugin-svelte --plugin=prettier-plugin-tailwindcss" https://prettier.io/docs/en/plugins

I had this previously: "format": "prettier --plugin-search-dir . --write .", This does not work with .svelte files.

baresi687 on Aug 9, 2023

Hey all! I pushed out an insiders build that enables support for plugins!

There are two important things to note:

It supports Prettier v3+ only — ultimately we couldn’t find a way to support both v2 and v3 within the same plugin and have it work with some external tools

Most but not all plugins that were supported in v2 work. Marko and Twig support have been removed as they don’t support v3 currently. If they get updates to support Prettier v3 in the future we’ll look into it.

I’ve done a good bit of testing myself and things appear to work but it would be great if you all could test our insiders build in whatever tooling you’re using and report back! Also, if you’re using VSCode, be sure to reload VSCode after upgrading any prettier plugins.
npm install prettier-plugin-tailwindcss@insiders

Thank you for your work. It managed to sort Tailwind classes after upgrading to the aforementioned build. By the way, I had the following Prettier config.

{ "plugins": [ "prettier-plugin-astro", "prettier-plugin-organize-imports", "prettier-plugin-tailwindcss" ], "tailwindFunctions": ["cva"] }

eminaliyevx on Aug 9, 2023

Thanks a lot for your work. However, not working for me, tried on a clean Astro setup.

My route: npm create astro@latest

npx astro add tailwind

npm i prettier-plugin-astro

npm install prettier-plugin-tailwindcss@insiders

.prettierrc {“plugins”: [“prettier-plugin-astro”, “prettier-plugin-tailwindcss”]}

Prettier is not working at all, no formatting and no tailwind class sort.

Maybe I do something wrong?

I follow this blog, and it works for me: https://webreaper.dev/posts/astro-prettier-tailwind-setup/

this is my package.json:

 "scripts": {
    "dev": "astro dev",
    "start": "astro dev",
    "build": "astro check && astro build",
    "preview": "astro preview",
    "astro": "astro",
    "format": "prettier  --plugin=prettier-plugin-astro --plugin=prettier-plugin-tailwindcss --write ."
  },

mmartinrm97 on Jan 19, 2024

@thecrypticace

It’s working with Svelte. In both ESM and JSON.

package.json

"prettier": "^3.0.1",
"prettier-plugin-svelte": "^3.0.3",
"prettier-plugin-tailwindcss": "^0.0.0-insiders.ac70a66",

.prettierrc.mjs/js

/** @type {import("prettier").Options} */
export default {
	useTabs: true,
	singleQuote: true,
	trailingComma: 'none',
	printWidth: 100,
	plugins: ['prettier-plugin-svelte', 'prettier-plugin-tailwindcss'],
	overrides: [{ files: '*.svelte', options: { parser: 'svelte' } }]
};

baresi687 on Aug 9, 2023

@GeoGeorgeous I will recommend to stick to "prettier": "2.8.8" for now. Plugins are being upgraded to v3, documentation is not clear and there’s an issue where you have to pass plugin options to the CLI commands even if configured on the pretierrc. I think this migration needs more time to mature.

I will wait a few more weeks and try to update to v3 again.

juanpujol on Jul 19, 2023

@Vaiterius I still have conflict on a project, I posted my config here. Do you have any tips ?

aurelienbobenrieth on Nov 21, 2023

it’s working for me after upgrading to insiders version, vscode restart was needed. i’m using it in .astro files. thanks for your work @thecrypticace!

wiew on Aug 9, 2023

@thecrypticace thanks so much for the response. Unfortunately I’m locked in with Prettier V3 - its not a big deal though. I can just sort the classes retrospectively. I really appreciate your work on this, thank you from all of us!

TristanBrotherton on Jul 27, 2023