在Next.js中同时使用React Suite与Tailwind CSS出现样式冲突如何解决？

问题原因 #

你在next.config.js中自定义的webpack规则同时匹配了.css和.less后缀的文件，且该规则未引入Tailwind依赖的postcss-loader，导致Tailwind相关的@tailwind指令未被正确编译，所以Tailwind样式失效。React Suite的样式是.less文件，不受PostCSS处理的影响，所以可以正常运行。

解决方案 #

首选方案（无需额外安装依赖） #

仅让自定义webpack规则处理React Suite需要的.less文件，.css文件保留Next.js原生的处理逻辑（原生已经内置了PostCSS支持，可直接处理Tailwind样式），只需修改next.config.js中的匹配规则即可：

const MiniCssExtractPlugin = require('mini-css-extract-plugin')

module.exports = {
  reactStrictMode: true,
  webpack(config) {
    config.module.rules.push({
      // 仅匹配.less文件，不要匹配.css
      test: /\.less$/,
      use: [
        MiniCssExtractPlugin.loader,
        {
          loader: 'css-loader',
        },
        {
          loader: 'less-loader',
          options: {
            sourceMap: true,
            lessOptions: {
              javascriptEnabled: true,
            },
          },
        },
      ],
    })

    config.plugins.push(
      new MiniCssExtractPlugin({
        filename: 'static/css/[name].css',
        chunkFilename: 'static/css/[contenthash].css',
      }),
    )

    return config
  },
}

修改后重启项目即可同时正常使用Tailwind和React Suite。

备选方案（全自定义css/less处理） #

如果需要自定义所有css/less的处理逻辑，可以在现有规则中补充postcss-loader：

1. 先安装依赖：

npm install postcss-loader --save-dev

2. 修改next.config.js配置，新增postcss-loader配置：

const MiniCssExtractPlugin = require('mini-css-extract-plugin')

module.exports = {
  reactStrictMode: true,
  webpack(config) {
    config.module.rules.push({
      test: /\.(le|c)ss$/,
      use: [
        MiniCssExtractPlugin.loader,
        {
          loader: 'css-loader',
        },
        // 新增postcss-loader处理Tailwind
        {
          loader: 'postcss-loader',
          options: {
            postcssOptions: {
              plugins: [
                require('tailwindcss'),
                require('autoprefixer'),
              ]
            }
          }
        },
        {
          loader: 'less-loader',
          options: {
            sourceMap: true,
            lessOptions: {
              javascriptEnabled: true,
            },
          },
        },
      ],
    })

    config.plugins.push(
      new MiniCssExtractPlugin({
        filename: 'static/css/[name].css',
        chunkFilename: 'static/css/[contenthash].css',
      }),
    )

    return config
  },
}

注意事项 #

如果后续发现React Suite的基础样式被Tailwind的全局重置样式覆盖，可以调整_app.js中的样式导入顺序，将import 'assets/styles/globals.css'放在import 'rsuite/styles/index.less'之前即可。

内容的提问来源于stack exchange，提问作者Kareem Mamdouh