How to Use React Suite with tailwind css in Next.js?

Question

Description

I want to use React Suite and tailwind so I install tailwind following the installation instructions from the documentation and it's working fine, but when I install React Suite and add some configuration in the next.config.js file tailwind is no longer working, and React Suite workers well, I think the problem is with this file I hope you can help me with this problem

Code

the example in code sandbox

_app.js

import React, { useEffect } from 'react'
import 'rsuite/styles/index.less'
import 'assets/styles/globals.css'
import { Provider } from 'react-redux'
import { useStore } from 'redux/store/index'
import { LANGUAGE } from 'redux/store/actionTypes'

function MyApp({ Component, pageProps }) {    
  return (
    <Provider store={store}>
      <Component {...pageProps} />
    </Provider>
  )
}

export default MyApp

tailwind.config

module.exports = {
  purge: ['./pages/**/*.{js,ts,jsx,tsx}', './components/**/*.{js,ts,jsx,tsx}'],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
  prefix: 'tw-',
}

postcss.config

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

globals.css

@tailwind base;
@tailwind components;
@tailwind utilities;
html,
body {
  padding: 0;
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans,
    Droid Sans, Helvetica Neue, sans-serif;
  
}

a {
  color: inherit;
  text-decoration: none;
}

* {
  box-sizing: border-box;
}

next.config.js

I think the problem is here

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',
        },
        {
          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
  },
}

package.json

{
  "name": "next-starter-code",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "husky": {
    "hooks": {
      "pre-commit": "npm run lint"
    }
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "dependencies": {
    "axios": "^0.21.4",
    "i18next": "^21.2.0",
    "next": "11.1.2",
    "react": "17.0.2",
    "react-dom": "17.0.2",
    "react-i18next": "^11.12.0",
    "react-redux": "^7.2.5",
    "redux": "^4.1.1",
    "redux-devtools-extension": "^2.13.9",
    "redux-thunk": "^2.3.0",
    "rsuite": "^5.0.0",
    "sass": "^1.42.1"
  },
  "devDependencies": {
    "autoprefixer": "^10.3.6",
    "babel-eslint": "^10.1.0",
    "css-loader": "^6.3.0",
    "dotenv": "^10.0.0",
    "env-cmd": "^10.1.0",
    "eslint": "^7.32.0",
    "eslint-config-airbnb": "^18.2.1",
    "eslint-config-next": "11.1.2",
    "eslint-config-prettier": "^8.3.0",
    "eslint-config-react-app": "^6.0.0",
    "eslint-plugin-flowtype": "^6.1.0",
    "eslint-plugin-i18next": "^5.1.2",
    "eslint-plugin-import": "^2.24.2",
    "eslint-plugin-jsx-a11y": "^6.4.1",
    "eslint-plugin-prettier": "^4.0.0",
    "eslint-plugin-react": "^7.26.1",
    "eslint-plugin-react-hooks": "^4.2.0",
    "husky": "^7.0.2",
    "less": "^4.1.2",
    "less-loader": "^10.0.1",
    "lint-staged": "^11.1.2",
    "mini-css-extract-plugin": "^2.3.0",
    "postcss": "^8.3.8",
    "prettier": "^2.4.1",
    "pretty-quick": "^3.1.1",
    "tailwindcss": "^2.2.16",
    "webpack": "^5.57.1"
  }
}

Answer 1

I came across the same issue it seems that when you add the webpack config needed to work with NextJS

test: /\.(le|c)ss$/,

This causes to apply css-loader and less-loader to the css files in tailwind's package. So I tried doing this:

test: /\.less$/,

The above did get rid of the error but then it tailwind stoped working. Here are my styles with tailwind (without rsuite config)

Tailwind CSS Styling

Here are my styles with tailwind (with my modified config)

RSuite overriding Tailwind

I belive that we might need to have a diffrent webpack config that will take care of both .less in RSuite and .css in Tailwind individualy

Answer 2

Just change the regex from

test: /\.(le|c)ss$/,

to

test: /\^(?!tailwind.css).(le|c)ss$/,

Doing this will exclude tailwind css file while processing with css-loader or less loader and everything starts working the way it should

There might be some visual defects which can be overriden by writing custom css.

Also to keep tailwind the incharge of the styling your components make sure you import tailwind after the rsuite css in the _app.js (or _app.tsx) as below

import "rsuite/dist/rsuite.min.css";

import "tailwindcss/tailwind.css";
import "../styles/styles.css";