Can't require() plugin after upgrading to v0.5.x

[Paget96]

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

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

What version of Node.js are you using?
19.5.0

What package manager are you using?
npm

What operating system are you using?
Windows 11

Describe your issue
I have just updated from v0.4.0 to 0.5.3 and this issue came when we do try to run the site

`
./app/global.css.webpack[javascript/auto]!=!../../node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[2].oneOf[13].use[2]!../../node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[2].oneOf[13].use[3]!./app/global.css
D:\Development\EmploHub\Emplohub\node_modules\prettier-plugin-tailwindcss\dist\index.mjs:4
const require=_module2.createRequire.call(void 0, import.meta.url)
^

SyntaxError: Identifier 'require' has already been declared
`

We are using NextJs 13.4.19

[thecrypticace]

Can you provide a reproduction? That seems like something is trying to compile the prettier plugin to CJS which isn't possible rather than just run it (which shouldn't be happening).

[Jobbies]

I have the same error.

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

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

What version of Node.js are you using?
18.7.0

What package manager are you using?
npm

What operating system are you using?
MacOS 13.5.1

/Users/joel/.nvm/versions/node/v18.17.0/bin/npm run tw-watch

> [email protected] tw-watch
> NODE_ENV=development TAILWIND_MODE=watch npx tailwindcss -i assets/css/tailwind.css -o assets/css/hychill.css --watch

Rebuilding...
/Users/joel/Files/sites/hychill.com.au/node_modules/prettier-plugin-tailwindcss/dist/index.mjs:4
const require=_module2.createRequire.call(void 0, import.meta.url)
      ^
SyntaxError: Identifier 'require' has already been declared

[triplecasquette]

Facing the same problem:

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

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

What version of Node.js are you using?
20.3.0

What package manager are you using?
pnpm

What operating system are you using?
MacOS 13.4.1

My framework is nextJs

Here is the error message :

- error ./app/globals.css.webpack[javascript/auto]!=!./node_modules/.pnpm/[email protected]_@[email protected][email protected][email protected]/node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[5].oneOf[12].use[2]!./node_modules/.pnpm/[email protected]_@[email protected][email protected][email protected]/node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[5].oneOf[12].use[3]!./app/globals.css
/Users/vincentcottalorda/sites/ada/node_modules/.pnpm/[email protected][email protected]/node_modules/prettier-plugin-tailwindcss/dist/index.mjs:4
const require=_module2.createRequire.call(void 0, import.meta.url)
      ^

SyntaxError: Identifier 'require' has already been declared
Import trace for requested module:
./app/globals.css.webpack[javascript/auto]!=!./node_modules/.pnpm/[email protected]_@[email protected][email protected][email protected]/node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[5].oneOf[12].use[2]!./node_modules/.pnpm/[email protected]_@[email protected][email protected][email protected]/node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[5].oneOf[12].use[3]!./app/globals.css
./app/globals.css```

Thanks for any help

Edit: For the moment I just delete the require on the plugins line of my tailwind config so my site run again, but the plugin doesn't work

[thecrypticace]

@Jobbies @com-pote Could either of you provide a reproduction? Or at the very least your tailwind config files?

@com-pote Are you calling require('prettier-plugin-tailwindcss') in your application code, tailwind config, or somewhere else?

[PaulHaze]

I also have been having this issue when upgrading to prettier v3.0 and this plug in to 0.5.3. Apparently this is has been noticed over at Prettier too:

prettier/prettier#15231

prettier/prettier#15062

My prettierrc.json:

{
  "plugins": ["prettier-plugin-tailwindcss"],
  "semi": true,
  "trailingComma": "all",
  "singleQuote": true,
  "printWidth": 80,
  "tabWidth": 2
}

my tailwind config:

/* @type {import('tailwindcss').Config} */
module.exports = {
  plugins: [require('prettier-plugin-tailwindcss')],
  content: ['./src/**/*.{js,ts,jsx,tsx}'],

  theme: {
    fontSize: {
      xs: '0.75rem',
      sm: '0.875rem',
      base: '1rem',
      lg: '1.125rem',
      xl: '1.25rem',
      '2xl': '1.5rem',
      '3xl': '1.875rem',
      '4xl': '2.25rem',
      '5xl': '3rem',
      '6xl': '4rem',
    },
    screens: {
      xs: '431px',
      sm: '640px',
      md: '768px',
      lg: '1024px',
      xl: '1280px',
      '2xl': '1536px',
      mxs: { max: '431px' },
      msm: { max: '640px' },
      mmd: { max: '768px' },
      mlg: { max: '1024px' },
      mxl: { max: '1280px' },
      m2xl: { max: '1536px' },
      xsm: { min: '431px' },
      smm: { min: '640px' },
      mdm: { min: '768px' },
      lgm: { min: '1024px' },
      xlm: { min: '1280px' },
      '2xlm': { min: '1536px' },
    },
    container: {
      center: true,
    },
    extend: {
      minWidth: {
        xs: '431px',
        sm: '640px',
        md: '768px',
        lg: '1024px',
        xl: '1280px',
        '2xl': '1536px',
      },
      maxWidth: {
        xs: '431px',
        sm: '640px',
        md: '768px',
        lg: '1024px',
        xl: '1280px',
        '2xl': '1536px',
      },
      spacing: {
        sm: '1rem',
        md: '2rem',
        lg: '4rem',
        xl: '8rem',
        '2xl': '16rem',
        '4xl': '32rem',
      },
      backgroundImage: {
        'gradient-radial': 'radial-gradient(var(--tw-gradient-stops))',
        'gradient-conic':
          'conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))',
      },
    },
  },
};

[diegohaz]

Not sure if it's related, but I see the following error:

Error [ERR_REQUIRE_ESM]: require() of ES Module /node_modules/prettier-plugin-tailwindcss/dist/index.mjs not supported.
Instead change the require of /node_modules/prettier-plugin-tailwindcss/dist/index.mjs to a dynamic import() which is available in all CommonJS modules.

Here's the prettier.config.cjs file:

/** @type {import("prettier").Config} */
module.exports = {
  plugins: [require("prettier-plugin-tailwindcss")],
  tailwindConfig: "./tailwind.config.cjs",
};

I'd expect require to work since it's a .cjs file, unless prettier-plugin-tailwindcss is now ESM-only?

[Jobbies]

Well this is embarrassing. I was requiring prettier-plugin-tailwindcss in tailwind.config.js as well as prettier.config.js. Removing it from tailwind.config.js solved the problem for me.

[triplecasquette]

After a few checks I realized that in my prettier file I write .js whereas my tailwind configuration file is a .ts file. So I renamed my file to tailwind.config.js and now I can run pnpm exec prettier ./components --write However, with this configuration I'm no longer able to format with my text editor which, by the way, is vscode, nor can I format on save either, obviously. Maybe there's a configuration problem. Because if I no longer have a prettier.config.js file, I'm still able to format my code as usual, as well as when saving. If you have any advice on my vsCode configuration in relation to prettier, or a way to run the plugin without the prettier config file that would be very helpful, thank you.

[weixinnnn]

My fix is remove prettier-plugin-tailwindcss from tailwind.config and put it in prettier.config as following
module.exports = { plugins: [require("prettier-plugin-tailwindcss")], };
And to avoid conflict, I changed both of them into .js

[mhuretski]

Not sure if it's related, but I see the following error:

Error [ERR_REQUIRE_ESM]: require() of ES Module /node_modules/prettier-plugin-tailwindcss/dist/index.mjs not supported.
Instead change the require of /node_modules/prettier-plugin-tailwindcss/dist/index.mjs to a dynamic import() which is available in all CommonJS modules.

Here's the prettier.config.cjs file:

/** @type {import("prettier").Config} */
module.exports = {
  plugins: [require("prettier-plugin-tailwindcss")],
  tailwindConfig: "./tailwind.config.cjs",
};

I'd expect require to work since it's a .cjs file, unless prettier-plugin-tailwindcss is now ESM-only?

the same error for me

[triplecasquette]

plugins: ["prettier-plugin-tailwindcss"],

don't require neither in tailwind.config.js

[mhuretski]

This plugin now requires Prettier v3+

i had 2.8.8, so updating to v3 fixed the issue

[buhlerfanny]

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

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

What version of Prettier are you using?
v3.0.2

What version of Node are you using?
v16.13.0

I'm also getting this error:

Error [ERR_REQUIRE_ESM]: require() of ES Module .../node_modules/prettier-plugin-tailwindcss/dist/index.mjs not supported.
Instead change the require of .../node_modules/prettier-plugin-tailwindcss/dist/index.mjs to a dynamic import() which is available in all CommonJS modules.

I've also tried making this file a cjs-file without luck.

// prettier.config.js
module.exports = {
  plugins: [require("prettier-plugin-tailwindcss")],
};

[thecrypticace]

@buhlerfanny You should use just the plugin name without require():

// prettier.config.js
module.exports = {
  plugins: ["prettier-plugin-tailwindcss"],
};

[thecrypticace]

Hey everyone! In general what I'm seeing here can be explained by users either calling require("prettier-plugin-tailwindcss") or importing the plugin in the wrong place.

This plugin, as of v0.5, requires Prettier v3+ and is now ESM-only. Let's discuss the upgrade path from v0.4 to v0.5+, some scenarios that you might've run into, and the reasons behind the change:

Upgarding to v0.5+

Overview

First, prettier-plugin-tailwindcss v0.5 requires a minimum of Prettier v3. Supporting both versions of Prettier is, unfortunately, not possible in a single version of our plugin.

This means that:

• All plugins you are using MUST be listed in your prettier config
• You will get an error when trying to use prettier-plugin-tailwindcss v0.5 with Prettier v2
• Any tooling you use MUST also be upgraded to support Prettier v3 they have not done so already — whether it be the Prettier VS Code extension, eslint-plugin-prettier, or other tools.

Second, prettier-plugin-tailwindcss is now ESM-only.

This means that:

• You MUST specify it in your Prettier Config as a string 'prettier-plugin-tailwindcss'
• You CANNOT require() — doing so will result in errors about being unable to require() an ES Module.
• You CANNOT import it in a file that is compiled to Common JS.

How to upgrade

If you have not done so — first upgrade to Prettier v3. Then proceed with the rest of this guide.

I do not have a prettier config

In Prettier v2 plugins could be autoloaded. This worked by following a naming convention for a package — any package name starting with prettier-plugin- was automatically lodaded by Prettier unless autoloading was disabled. This did not work well with certain package managers and the feature was removed in Prettier v3. Now you MUST create a prettier config listing all plugins you want to use. To migrate you will need to create a prettier.config.js file containing the following:

// prettier.config.js

module.exports = {
  plugins: ['prettier-plugin-tailwindcss'],
}

My prettier config is in package.json

It's likely you won't need to change anything but you'll want to make sure that prettier-plugin-tailwindcss is present in your plugins list — and be sure it is listed last if you are using multiple plugins:

// package.json

{
  // …
  "prettier": {
    "plugins": [
      "prettier-plugin-tailwindcss"
    ]
  }
}

I am not using import or require() in my prettier config file

If you're using the string prettier-plugin-tailwindcss directly as a plugin name you do not need to change anything

Before and after:

// prettier.config.js

module.exports = {
  plugins: ['prettier-plugin-tailwindcss'],
}

I am using require() in my prettier config file

You will need to replace require('prettier-plugin-tailwindcss') with 'prettier-plugin-tailwindcss':

Before:

// prettier.config.js

module.exports = {
  plugins: [require('prettier-plugin-tailwindcss')],
}

After:

// prettier.config.js

module.exports = {
  plugins: ['prettier-plugin-tailwindcss'],
}

I am calling import in my prettier config file

This is not a typical situation that is/was supported by Prettier. But, on the chance that you do have a setup that looks like this you will need to remove the import for the package and put 'prettier-plugin-tailwindcss' directly in your plugin list:

Before:

// prettier.config.js

import tailwindcssPlugin from 'prettier-plugin-tailwindcss'

export default {
  plugins: [tailwindcssPlugin],
}

After:

// prettier.config.js

export default {
  plugins: ['prettier-plugin-tailwindcss'],
}

I'm still seeing errors

If you've gone through the above list and are still seeing errors:

Error [ERR_REQUIRE_ESM]: require() of ES Module …

This means that you still have a call to require("prettier-plugin-tailwindcss") somewhere in your code. Probably in a config file. In this situation you'll want to track down the file with the require and remove it. Additionally, if it was in a prettier config — add 'prettier-plugin-tailwindcss' to the end of the plugin list.

SyntaxError: Identifier 'require' has already been declared

This is probably happening because you're calling require("prettier-plugin-tailwindcss") in your Tailwind config file (tailwind.config.js, tailwind.config.cjs, tailwind.config.mjs, tailwind.config.ts).

This package is NOT a Tailwind CSS plugin. It is a Prettier plugin for Tailwind CSS. As such you should remove require("prettier-plugin-tailwindcss") from your Tailwind config, and remove any reference to the prettier plugin from your Tailwind plugins list. Additionally, if you're using import plugin from "prettier-plugin-tailwindcss" in your Tailwind CSS file you should also remove that.

No references to this plugin need to exist in your Tailwind CSS config file.

I'm still seeing the above but it's not in my Tailwind CSS config file

This likely means that the above is true but for your application code. You do NOT need to require() or import this plugin in your application code. This plugin is a development-time or build-time tool.

In this situation, the result is the same: You should remove any references to require("prettier-plugin-tailwindcss") or import plugin from "prettier-plugin-tailwindcss" or import "prettier-plugin-tailwindcss" from your application code.

My project requires Prettier v2

If your project's dependencies or situation preclude you from upgrading Prettier itself then you may continue to use Prettier v2 alongside version v0.4.x of our plugin. This may be the case especially if you require the use of prettier-plugin-marko or prettier-plugin-twig-melody as, at the time of this writing, neither plugin has been updated for Prettier v3.

Why things changed

So, prettier-plugin-tailwindcss is ESM-only now. Why?

Prettier v3 moved to using dynamic imports to load plugins. This means that other plugins may be written and published as ESM-only. Unfortunately, this means that we ALSO must use dynamic imports to load third-party plugins that we support.

Our plugin works by loading built-in and third-party plugins, re-defining their parsers, and defering back to the original parser before sorting classes. In CJS environments this was fairly simple as a require() call is synchronous and can be dynamic. The problem is that these calls don't support loading ESM plugins. So, in ESM environments the only way to achieve this is to use a dynamic import() which returns a promise. However, Prettier itself loads plugins asynchronously but expects parsers, printers, etc… to be defined synchronously by the time the plugin has been imported.

To work around this we figure out what plugins you have installed in your node_modules and load them using a dynamic import. When then use a ESM-only feature called Top-Level Await. This feature allows us to delay initialization of the entire module until all supported third-party plugins have been checked for and loaded when available. After loading these plugins we keep a reference around such that, at the appropriate time, we can load the plugin's original parser to call into it before sorting classes.

Couldn't you provide a dual CJS/ESM build?

Sadly, no. While we could support built-in plugins in a CJS bundle, third-party plugin support wouldn't be possible in a CJS build for some plugins. This is entirely based on whether or not the third-party plugin was CJS or ESM itself. Additionally, some tools like the Prettier VS Code extension do not load the ESM version of a package unless it's ESM-only because it uses require.resolve internally which will always pick the CJS build if one is available. This means that third-party support would be completely broken in VS Code but not the CLI. Given that it's such a popular editor we consider this a non-starter.

The side-effect of these last two points is that a CJS build of this plugin is no longer possible.

[ony3000]

Hello @thecrypticace, this may be a pointless discussion since at some point most users will be using prettier 3.x, but I still have one question.

I understand that the reason this plugin guarantees compatibility with some third-party plugins is because prettier does not support formatting for multiple plugins that implement the same parser.

If this and third-party plugins can be formatted independently, is there any chance that dual CJS/ESM builds will be supported again?

[thecrypticace]

I understand that the reason this plugin guarantees compatibility with some third-party plugins is because prettier does not support formatting for multiple plugins that implement the same parser.

Yeah basically we implement 3rd party support ourselves because it would not otherwise be possible with Prettier today. I even worked on a prototype API for prettier that would enable this but in the end discovered that someone came up with a similar idea that was shot down by the Prettier team. So I'm not sure what that'd look like.

… is there any chance that dual CJS/ESM builds will be supported again?

In theory, sure but it would still be Prettier v3 only because any change would require updates to Prettier itself and it's doubtful that you'd get updates in v2 and v3 now that v3 is out.

[ony3000]

All right. In my case, I solved prettier's multiple plugin formatting limitations by creating another plugin, but I think it's too late to suggest a dual build with this.

[thecrypticace]

Yeah that can work in some scenarios as long as none of the required plugins are ESM and you know that the plugin is always going to be used.

[Kaveks]

@buhlerfanny You should use just the plugin name without require():

// prettier.config.js
module.exports = {
  plugins: ["prettier-plugin-tailwindcss"],
};

cool worked for me

[Ari-coding]

@buhlerfanny You should use just the plugin name without require():

// prettier.config.js
module.exports = {
  plugins: ["prettier-plugin-tailwindcss"],
};

cool worked for me

i added a prettier.config.js file in the root directory and i added this code below and still not work what to do
// prettier.config.js
module.exports = {
plugins: ["prettier-plugin-tailwindcss"],
};

[Kaveks]

@buhlerfanny You should use just the plugin name without require():

// prettier.config.js
module.exports = {
  plugins: ["prettier-plugin-tailwindcss"],
};

cool worked for me

i added a prettier.config.js file in the root directory and i added this code below and still not work what to do // prettier.config.js module.exports = { plugins: ["prettier-plugin-tailwindcss"], };

have you installed prettier? for me prettier version 3.0.3 works with the config file

[designorant]

@thecrypticace Thanks for the Upgrade Guide but please bump the major version to satisfy SemVer: tailwindlabs/tailwindcss#12307

[thecrypticace]

@designorant The version bump from 0.4.x to 0.5.x does satisfy Semantic Versioning requirements. If we were already at 1.y.z then we would've needed to bump to v2.0 but we were not.

[designorant]

@designorant The version bump from 0.4.x to 0.5.x does satisfy Semantic Versioning requirements. If we were already at 1.y.z then we would've needed to bump to v2.0 but we were not.

It does, and it doesn't.

SemVer clearly says:

MINOR version when you add functionality in a backward compatible manner

Bump to v0.5.x wasn't backward compatible as it requires Prettier v3 which comes with major changes.

I appreciate you may consider prettier-plugin-tailwindcss not v1 worthy (something SemVer calls "initial development phase") and that "anything may change at any time", but as per my reasoning, the major number is just a number, just like the minor and patch numbers.

There seems to be an industry convention is to keep the major versions low for some reason but major version zero is all about rapid development.

Given this package has 1m+ downloads every week and 200+ dependents bumping it to 1.0.0 would certainly help, especially given the recent changes.

After all:

If your software is being used in production, it should probably already be 1.0.0.

[thvroyal]

This plugin now requires Prettier v3+

i had 2.8.8, so updating to v3 fixed the issue

This works for me

My prettier.config.js:

// prettier.config.js

plugins: ["prettier-plugin-tailwindcss"],

[nbaron1]

Using a .prettierrc configuration file was the issue for me, once I converted the config to prettier.config.js it worked properly

[kxpro]

hi, How can I customize the plugin path "prettier-plugin-tailwindcss", it doesn't work as I have written. It only works with Tailwind config path.
module.exports = { tailwindConfig: "../my-app/tailwind.config.js", plugins: ["../my-app/node_modules/prettier-plugin-tailwindcss"], };

[theocerutti]

Doesn't work for me.
If I rename my file to .prettierrc then I can npm run lint but the prettier-plugin-tailwindcss just doesn't work.
And If I rename it to .prettier.config.js it's the opposite: I can't run npm run lint but the plugin work.

Note: When I run npm run lint I get this error:

Oops! Something went wrong! :(

ESLint: 8.54.0

Error [ERR_REQUIRE_ESM]: require() of ES Module /home/project/node_modules/prettier-plugin-tailwindcss/dist/index.mjs not supported.
Instead change the require of /home/project/node_modules/prettier-plugin-tailwindcss/dist/index.mjs to a dynamic import() which is available in all CommonJS modules.
Occurred while linting /home/project/.eslintrc.js:4
Rule: "prettier/prettier"

weird

[vuthienhai97]

I must using

"prettier": {
    "plugins": [
      "prettier-plugin-tailwindcss"
    ],
    "printWidth": 80,
    "trailingComma": "es5",
    "tabWidth": 2,
    "semi": false,
    "singleQuote": true
  }

in file 'package.json' to use both

"plugins": [
   "prettier-plugin-tailwindcss"
 ],

and

"printWidth": 80,
"trailingComma": "es5",
"tabWidth": 2,
"semi": false,
"singleQuote": true

I try to use it on file 'prettier.config.js' but not work
Is there any other way to do it?

[LucaRed]

Please check that you're actually using version >3.0 with prettier --version

You may be running an old Prettier version, even though you locally installed the correct version.

[itsezc]

Doesn't work for me. If I rename my file to .prettierrc then I can npm run lint but the prettier-plugin-tailwindcss just doesn't work. And If I rename it to .prettier.config.js it's the opposite: I can't run npm run lint but the plugin work.

Note: When I run npm run lint I get this error:

Oops! Something went wrong! :(

ESLint: 8.54.0

Error [ERR_REQUIRE_ESM]: require() of ES Module /home/project/node_modules/prettier-plugin-tailwindcss/dist/index.mjs not supported.
Instead change the require of /home/project/node_modules/prettier-plugin-tailwindcss/dist/index.mjs to a dynamic import() which is available in all CommonJS modules.
Occurred while linting /home/project/.eslintrc.js:4
Rule: "prettier/prettier"

weird

Having a similar issue, here's my prettier.config.js:

/** @type {import("prettier").Config} */
module.exports = {
  "plugins": ["prettier-plugin-svelte", 'prettier-plugin-tailwindcss',  "@trivago/prettier-plugin-sort-imports"],
  "overrides": [{ "files": "*.svelte", "options": { "parser": "svelte" } }],
  "printWidth": 160,
  "useTabs": true,
  "trailingComma": "all",
  "singleQuote": true,
  "semi": true,
  "importOrder": ["<THIRD_PARTY_MODULES>", "^@/(.*)$", "^$env/(.*)$", "^[./]"],
  "importOrderSeparation": true,
  "importOrderSortSpecifiers": true
};

I'm using the prettier plugin from VSCode, here's the error:

["ERROR" - 14:34:15] Error handling text editor change
["ERROR" - 14:34:15] require() of ES Module /Users/chiru/.../node_modules/prettier-plugin-tailwindcss/dist/index.mjs not supported.
Instead change the require of /Users/chiru/.../node_modules/prettier-plugin-tailwindcss/dist/index.mjs to a dynamic import() which is available in all CommonJS modules.
Error [ERR_REQUIRE_ESM]: require() of ES Module /Users/chiru/.../node_modules/prettier-plugin-tailwindcss/dist/index.mjs not supported.
Instead change the require of /Users/chiru/.../node_modules/prettier-plugin-tailwindcss/dist/index.mjs to a dynamic import() which is available in all CommonJS modules.
    at Function.<anonymous> (node:electron/js2c/asar_bundle:2:13327)
    at l._load (/Applications/Visual Studio Code - Insiders.app/Contents/Resources/app/out/vs/workbench/api/node/extensionHostProcess.js:173:5635)
    at r._load (/Applications/Visual Studio Code - Insiders.app/Contents/Resources/app/out/vs/workbench/api/node/extensionHostProcess.js:170:29791)
    at t._load (/Applications/Visual Studio Code - Insiders.app/Contents/Resources/app/out/vs/workbench/api/node/extensionHostProcess.js:135:35292)

@thecrypticace I don't believe the issue is resolved. I'm also running Prettier v3.2.4

[1997roylee]

plugins: ["prettier-plugin-tailwindcss"],

Same, cannot run from VSCode.

[voinik]

Ran into a similar issue while working in a monorepo. I was getting this error: TypeError: Cannot set property content of # which has only a getter

TypeError: Cannot set property content of #<Object> which has only a getter

It looks like the way you import/export config really matters. This is what my config looked like:

// apps/foo/tailwind.config.ts
export * from "@repo/ui/tailwind.config"; // My package.json for the ui package has an "exports" property: "exports": { "./tailwind.config": "./tailwind.config.ts" }. If yours doesn't, this import may need the extension

But it should actually be this:

import config from "@repo/ui/tailwind.config";

export default config;

Silly, but it bit me.

Just in case (as others have said), make sure your tailwind config doesn't include plugins: [require('tailwindcss-animate')],. If you use a Shadcn setup that generates tailwind config for you, you may have to remove that. You can't use require(..) in esm.

edit: typo

[nahSystemu]

@voinik
Ran into the same issue you had above, tried your solution, but unfortunately it didn't work. I've changed all my config files, so that I'm not using any imports/requires, but still having the issue, any suggestions?

[CodErebus-dot-com]

@voinik Ran into the same issue you had above, tried your solution, but unfortunately it didn't work. I've changed all my config files, so that I'm not using any imports/requires, but still having the issue, any suggestions?

Try changing it to .mjs with an export default.

[SystemDisc]

@designorant

SemVer clearly says:

MINOR version when you add functionality in a backward compatible manner

Bump to v0.5.x wasn't backward compatible as it requires Prettier v3 which comes with major changes.

Major version zero (0.y.z) is for initial development. Anything MAY change at any time. The public API SHOULD NOT be considered stable - source

[Rhym]

@voinik Ran into the same issue you had above, tried your solution, but unfortunately it didn't work. I've changed all my config files, so that I'm not using any imports/requires, but still having the issue, any suggestions?

Try changing it to .mjs with an export default.

This fixed it for me.