Using postcss-rename with gatsby-plugin-postcss

[naskio]

Hello Everyone,
I want to rename my CSS classes using postcss-rename.
My postcss.config.js looks like:

module.exports = {
  plugins: {
    tailwindcss: {},
    'postcss-rename': {
      strategy: 'minimal',
      by: 'whole',
      ids: true,
    },
    autoprefixer: {},
  },
};

Unfortunately, this configuration only change class names in the style sections but not in the HTML class attribute and ids (we will get a page without any styling because the class names don't match between CSS and HTML).
I tried to pass some configurations to gatsby-plugin-postcss in order to replace classes in HTML according to the map generated by postcss-rename plugin but it is not being applied to TailwindCSS classes.
| gatsby-config.ts

...
       {
            resolve: `gatsby-plugin-postcss`,
            options: {
                cssLoaderOptions: {
                    importLoaders: 1,
                    modules: { // not sure if we need this modules object or not
                        exportLocalsConvention: function (name: string) {
                            return name.replace(/-/g, "__"); // this is just to test that TailwindCSS classes are being renamed, but it fails
                        },
                        namedExport: false,
                    },
                },
            },
        },
...

Does anyone have an idea how we can also update class names and ids in the HTML output ?