Tailwind with Next.js Error: Expected a backslash preceding the semicolon

Question

I've been struggling with this one for quite a while. Everything was working perfectly and suddenly started failing to compile.

When running npm run dev I get this error:

error - ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[3].oneOf[9].use[1]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[3].oneOf[9].use[2]!./styles/global.css Error: Expected a backslash preceding the semicolon. at resolveMatches.next () at Function.from () at runMicrotasks () Import trace for requested module: ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[3].oneOf[9].use[1]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[3].oneOf[9].use[2]!./styles/global.css ./styles/global.css

The tailwind installation was done following this guide from their website: https://tailwindcss.com/docs/guides/nextjs

I have not changed anything after that.

My global.css only contains the three lines needed by tailwind:

@tailwind base;
@tailwind components;
@tailwind utilities;

package.json:

{
  "name": "skillsboardai",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start"
  },
  "dependencies": {
    "@headlessui/react": "^1.7.8",
    "@heroicons/react": "^2.0.14",
    "i18next": "^22.4.9",
    "i18next-browser-languagedetector": "^7.0.1",
    "i18next-http-backend": "^2.1.1",
    "next": "^13.1.6",
    "next-i18next": "^13.0.3",
    "openai": "^3.1.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-i18next": "^12.1.4"
  },
  "devDependencies": {
    "autoprefixer": "^10.4.13",
    "eslint": "8.33.0",
    "eslint-config-next": "13.1.6",
    "postcss": "^8.4.21",
    "tailwindcss": "^3.2.4"
  }
}

My tailwind.config.js:

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./app/**/*.{js,ts,jsx,tsx}",
    "./pages/**/*.{js,ts,jsx,tsx}",
    "./components/**/*.{js,ts,jsx,tsx}",
  ],
  darkMode: 'class',
  theme: {
    extend: {},
  },
  plugins: [],
}

My postcss.config.js:

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

And lastly, my _app.js imports the CSS

import React from 'react'
import '../styles/global.css'
import { appWithTranslation } from 'next-i18next';

function App({ Component, pageProps }) {
    return <Component {...pageProps} />;
  }

export default appWithTranslation(App);

I've seen similar posts, but they are related to other frameworks so I wanted to open this thread in case there is any specific actions to take within Next.js.

I am out of ideas and is frustrating, as it was working before.

I have tried:

• Removing tailwind: all works fine, but no tailwind of course
• Emptying global.css: all works fine, but no tailwind of course
• Removing all tailwind classes in my components: did not work
• Deleting .next folder and regenerating it: does not work
• Deleting also the node_modules and re installing them: does not work
• Even went back to my last known-to work commit: DOES NOT WORK EITHER!

Answer 1

I found the solution!

So in one of my components a div had the className [&:not(:focus-visible)]:focus:outline-none

I have no idea why it had that format, most likely some copied class from the web.

Anyway, remove that class, problem solved. Too bad the error given is so vague.