Tailwind import failed

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

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"],
};

Answer 2

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.