trying to connect the postcss plugin to tailwind

Question

I read instruction PostCSS plugin Guidlines, wrote a simple plugin just for the test.

module.exports = (opts) => {
    return {
        postcssPlugin: "testplugin",
        Once(root) {
            console.log("Hello")
        },
    };
};
module.exports.postcss = true;

But I don't understand how I can connect it to tailwind. I know there is a postcss.config.js file is about the following content

module.exports = {
    plugins: {
        tailwindcss: {},
        autoprefixer: {}
    },
};

but all my attempts to add a plugin there lead to the error

Cannot find module 'testplugin'

i use tailwind 3.1.8 and postcss 8.4.16

my github project

I wrote tailwind plugin but the question remains open

Answer 1

I used an vite - ide development server that provides extensive functionality compared to native ES modules, for example, extremely fast hot module replacement (HMR). it supports PostCSS, for support this feature uses plugin postcss-load-config. in which multiple syntaxes can be supported for objects and arrays. For objects, I still did not understand how to solve the problem, but it turned out with arrays

module.exports = {
    plugins: [
        require('tailwindcss'),
        require('autoprefixer'),
        require("./postcss/testplugin")
    ],
};