Tailwind import failed - sass

Question

Hi,
I'm trying to build an app using Tailwind and NextJs with some style in SCSS. Everything was working find and I was tweaking some Tailwind class in my components until the app suddenly crashed with this message
./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[3].oneOf[10].use[1]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[3].oneOf[10].use[2]!./node_modules/next/dist/build/webpack/loaders/resolve-url-loader/index.js??ruleSet[1].rules[3].oneOf[10].use[3]!./node_modules/next/dist/compiled/sass-loader/cjs.js??ruleSet[1].rules[3].oneOf[10].use[4]!./styles/globals.scss
TypeError: Cannot read properties of undefined (reading '5')
It appeared just like this, it worked for 3 hours and then just stopped, I did not changed any config files or anything else. I don't understand. After some time looking trough my code I've found that if I remove these import at the top of my global.scss the app works fine, but I don't know where this undefined variable is..
#tailwind base;
#tailwind components;
#tailwind utilities;
here is my tailwind config
module.exports = {
purge: ['./pages/**/*.{js,ts,jsx,tsx}', './components/**/*.{js,ts,jsx,tsx}'],
darkMode: false,
theme: {
extend: {
spacing: {
'2/3': '66.666667%',
},
colors: {
'lavander-grey': '#625F63',
'lavander-indigo': '#9893DA'
},
},
},
variants: {
extend: {},
},
plugins: [],
};
package.json
"engines": {
"node": ">=14.0"
},
"engineStrict": true,
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start",
"lint": "next lint"
},
"dependencies": {
"graphql": "^16.6.0",
"graphql-request": "^5.0.0",
"html-react-parser": "^3.0.4",
"moment": "^2.29.4",
"next": "13.0.3",
"react": "18.2.0",
"react-dom": "18.2.0",
"react-multi-carousel": "^2.8.2",
"sass": "^1.56.1",
"swr": "^1.3.0"
},
"devDependencies": {
"autoprefixer": "^10.4.13",
"eslint": "^8.27.0",
"eslint-config-airbnb": "^19.0.4",
"eslint-config-next": "13.0.3",
"eslint-plugin-import": "^2.26.0",
"eslint-plugin-jsx-a11y": "^6.6.1",
"eslint-plugin-react": "^7.31.10",
"eslint-plugin-react-hooks": "^4.6.0",
"postcss": "^8.4.19",
"tailwindcss": "^3.2.4"
Postcss.config.js
module.exports = {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
}
thanks for your help
I've tried to install some older Tailwind packages, wiped node_modules, made sure this was not my components the culprit, tried some Tailwind configurations,started a fresh dev server, did some intense googling

Answer 1

Tailwind is no longer using PurgeCSS under the hood with the release of their JIT compiler as of Tailwind 3.0.
Update the first line of your config to:
content: [
"./app/**/*.{js,ts,jsx,tsx}",
"./pages/**/*.{js,ts,jsx,tsx}",
"./components/**/*.{js,ts,jsx,tsx}",
],
As shown in the docs, and be sure to include a postcss.config.js file.

Answer 2

In order to write those:
#tailwind base;
#tailwind components;
#tailwind utilities;
you need to install postcss. 'postcss` is like webpack, uses plugins and evaluates them to modern CSS syntax that browser understand
npm install -D tailwindcss postcss autoprefixer postcss-nesting
Then you should have postcss.config.js and have this config:
module.exports = {
plugins: ["tailwindcss", "postcss-nesting", "autoprefixer"],
};