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"
  }
}

You may want to look into next-with-less plugin to support Less. — juliomalves
– juliomalves, Commented Oct 6, 2021 at 10:26

Vikrant Shah · Accepted Answer · 2021-12-02 10:49:54Z

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";

answered Dec 2, 2021 at 10:49

Vikrant Shah

851 gold badge1 silver badge10 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Vikrant Shah · Accepted Answer · 2021-11-20 11:00:38Z

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

edited Nov 20, 2021 at 11:00

answered Nov 20, 2021 at 10:54

Vikrant Shah

851 gold badge1 silver badge10 bronze badges

Collectives™ on Stack Overflow

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

Description

Code

_app.js

tailwind.config

postcss.config

globals.css

next.config.js

package.json

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

Description

Code

_app.js

tailwind.config

postcss.config

globals.css

next.config.js

package.json

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related