tailwind css with css modules in next.js

A solution is split webpack style loader. A loader for global css another for css modules loader so webpack loader is looks like below:

{
  test: /\.s?[ac]ss$/,
  exclude: /\.global.css$/,
  use: [
    {
      loader: MiniCssExtractPlugin.loader,
      options: {
        hmr: !isProduction,
        reloadAll: true,
      },
    },
    // 'css-loader',
    {
      loader: 'css-loader',
      options: {
        importLoaders: 1,
        modules: {
          localIdentName: '[name]__[local]___[hash:base64:5]',
        },
      },
    },
    'postcss-loader',
    { loader: 'sass-loader', options: { sourceMap: true } },
  ],
},
{
  test: /\.global.css$/,
  use: [
    {
      loader: MiniCssExtractPlugin.loader,
      options: {
        hmr: !isProduction,
        reloadAll: true,
      },
    },
    'css-loader',
    'postcss-loader',
  ],
},