prettier-plugin-tailwind

prettier-plugin-tailwind copied to clipboard

Describe the bug When installing the plugin, Prettier stops working. It had never happened to me before, today I decided to create a NextJS project and when I added prettier next to the plugin, the code formatting stopped working completely.

To Reproduce Steps to reproduce the behaviour:

1. Install Prettier
2. Install prettier-plugin-tailwind
3. Press CTRL + S and format on save doesn't work

Expected behaviour I expect to "format" the code on save, but this doesn't work. I already tested in other projects and works just fine.

Versions:

• prettier-plugin-tailwind version: 2.2.10
• Operating system: Ubuntu 20.04
• NPM/Yarn version: Yarn v1.22.10

Its likely due to the new utilities introduced in https://github.com/tailwindlabs/tailwindcss/releases/tag/v2.1.0

See https://github.com/Acidic9/tailwind-classes-sorter/issues/4

A fix is to disable JIT for formatting, by changing the tailwind.config.js:

module.exports = {
  // This "hack" ensures your IDE detects all normal Tailwind classes, while JIT is used when compiling the project.
  // All the normal Tailwind classes should show up in code completion. It can't show all the new classes generated by JIT.
  mode: process.env.NODE_ENV ? 'jit' : undefined,
};

For the Googlers out there:

✖ prettier -w -u:
/project-path/node_modules/tailwindcss/lib/plugins/backdropBlur.js:26
      matchUtilities({
      ^

TypeError: matchUtilities is not a function
    at /project-path/node_modules/tailwindcss/lib/plugins/backdropBlur.js:26:7
    at /project-path/node_modules/tailwindcss/lib/util/processPlugins.js:69:5
    at Array.forEach (<anonymous>)
    at TWClassesSorter._default [as processPlugins] (/project-path/node_modules/tailwindcss/lib/util/processPlugins.js:63:11)
    at /project-path/node_modules/tailwind-classes-sorter/lib/index.js:179:52
    at Array.forEach (<anonymous>)
    at TWClassesSorter.getAllSelectors (/project-path/node_modules/tailwind-classes-sorter/lib/index.js:167:14)
    at new TWClassesSorter (/project-path/node_modules/tailwind-classes-sorter/lib/index.js:47:37)
    at Object.<anonymous> (/project-path/node_modules/prettier-plugin-tailwind/lib/index.js:10:25)
    at Module._compile (node:internal/modules/cjs/loader:1109:14)

If you experience this symptom, take the above medicine.

  mode: process.env.NODE_ENV
    ? // JIT for `npm run dev`.
      'jit'
    : // No JIT for IDE class and generation & prettier runs.
      undefined,

This fix doesn't work in a number of scenarios, especially when using eslint with prettier either via cli or vscode extension. The matchUtilities is not a function error is triggered in both contexts.

I'd recommend switching to https://github.com/francoismassart/eslint-plugin-tailwindcss with --fix to handle the sorting. It handles jit mode perfectly.

To keep IDE code completion working with, I still include the NODE_ENV toggle above, but set jit on Tailwind inside .eslintrc.js:

const tailwindConfig = require('./tailwind.config');
tailwindConfig.mode = 'jit';

module.exports = {
  // Rest of config is omitted
  rules: {    
    'tailwindcss/classnames-order': 'warn',
    'tailwindcss/no-custom-classname': 'warn',
    'tailwindcss/no-contradicting-classname': 'error',
  }
  settings: {
    tailwindcss: {
      config: tailwindConfig,
      whitelist: customTailwindClasses,
    },
  },
}

Thanks, I did give that eslint-plugin-tailwindcss a go this morning but it's very slow and I have a post-commit hook to run the linter and it added about 30 seconds to my commit times on a not-yet-huge project so was a no go on anything other than a trivial project.

Having this same issue. Just disabled jit mode for now as this was in a relatively small and new toy project as well, but obviously down the line it'd be nice to have this plugin and tailwind jit working nicely together.

Anything we can do to help?