Problem with prettier-plugin-tailwind for React Typescript

Question

I'm trying to format tailwindcss code with prettier by using prettier-plugin-tailwind but it shows me this error and I don't know what to do.

Error:

\[error\] require() of ES Module ..../frontend/tailwind.config.js from ..../frontend/node_modules/tailwind-classes-sorter/lib/index.js not supported.
\[error\] Instead change the require of tailwind.config.js in ..../frontend/node_modules/tailwind-classes-sorter/lib/index.js to a dynamic import() which is available in all CommonJS modules.

Here is my tailwind.config.js configuration:

/** @type {import('tailwindcss').Config} */
export default {
    content: ['./src/**/*.{js,jsx,ts,tsx}', './index.html'],
    theme: {
        extend: {
            gridTemplateRows: {
                '[auto,auto,1fr]': 'auto auto 1fr',
            },
        },
    },
    plugins: [require('@tailwindcss/forms'), require('@tailwindcss/aspect-ratio')],
};

My Prettier configuration: file .prettierrc

{
    "bracketSameLine": true,
    "singleQuote": true,
    "printWidth": 100,
    "tabWidth": 4,
    "useTabs": true
}

I tried rewriting the code using imports instead of require but still the same error appears:

Here is my version of the tailwind.config.js file using dynamic imports.

import forms from '@tailwindcss/forms';
import aspectRatio from '@tailwindcss/aspect-ratio';

const config = {
    content: ['./src/**/*.{js,jsx,ts,tsx}', './index.html'],
    theme: {
        extend: {
            gridTemplateRows: {
                '[auto,auto,1fr]': 'auto auto 1fr',
            },
        },
    },
    plugins: [forms(), aspectRatio()],
};
export default config;

When I'm using it the same error appears. Do you have any ideas how to solve this issue?

score 0 · Answer 1 · answered May 15 '23 at 06:46

You just need to replace require with import in your first example, you can see the dynamic import being used in the @type declaration at the top of the file.

/** @type {import('tailwindcss').Config} */
export default {
    content: ['./src/**/*.{js,jsx,ts,tsx}', './index.html'],
    theme: {
        extend: {
            gridTemplateRows: {
                '[auto,auto,1fr]': 'auto auto 1fr',
            },
        },
    },
    plugins: [import('@tailwindcss/forms'), import('@tailwindcss/aspect-ratio')],
};

Problem with prettier-plugin-tailwind for React Typescript

1 Answers1