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
_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"
}
}
Just change the regex from
to
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