Why am I getting this error (Tailwind + Next.js)? HookwebpackError, CssSyntaxError

Question

Been having this issue for a week now and haven't been able to find a solution, but I figured out some things to narrow down the issue. I'm attempting to run yarn build in my Next.js application but it fails with an error that I'll post below.

The program app compiles fine with yarn dev and all the styles work. I used the standard setup from the TW docs.

Could bad style names cause errors with building? For example className="BadStyleName h-10 w-10"

Error:

info  - Creating an optimized production build  
Failed to compile.

HookWebpackError: C:\Users\project\static\css\b0067dc6dc66c8dc.css:2251:12: Unknown word
    at makeWebpackError (C:\Users\project\node_modules\next\dist\compiled\webpack\bundle5.js:47168:9)
    at C:\Users\project\node_modules\next\dist\compiled\webpack\bundle5.js:31056:12
    at eval (eval at create (C:\Users\project\node_modules\next\dist\compiled\webpack\bundle5.js:141512:10), <anonymous>:34:1)
    at processTicksAndRejections (node:internal/process/task_queues:96:5)
-- inner error --
CssSyntaxError: C:\Users\project\static\css\b0067dc6dc66c8dc.css:2251:12: Unknown word
    at Input.error (C:\Users\project\node_modules\next\node_modules\postcss\lib\input.js:123:16)
    at ScssParser.unknownWord (C:\Users\project\node_modules\next\node_modules\postcss\lib\parser.js:518:22)
    at ScssParser.other (C:\Users\project\node_modules\next\node_modules\postcss\lib\parser.js:149:12)
    at ScssParser.parse (C:\Users\project\node_modules\next\node_modules\postcss\lib\parser.js:59:16)
    at scssParse (C:\Users\project\node_modules\next\dist\compiled\postcss-scss\scss-syntax.js:1:335)
    at new LazyResult (C:\Users\project\node_modules\next\node_modules\postcss\lib\lazy-result.js:122:16)
    at Processor.process (C:\Users\project\node_modules\next\node_modules\postcss\lib\processor.js:33:12)
    at CssMinimizerPlugin.optimizeAsset (C:\Users\project\node_modules\next\dist\build\webpack\plugins\css-minimizer-plugin.js:43:12)
    at C:\Users\project\node_modules\next\dist\build\webpack\plugins\css-minimizer-plugin.js:77:55
    at processTicksAndRejections (node:internal/process/task_queues:96:5)
caused by plugins in Compilation.hooks.processAssets
CssSyntaxError: C:\Users\project\static\css\b0067dc6dc66c8dc.css:2251:12: Unknown word
    at Input.error (C:\Users\project\node_modules\next\node_modules\postcss\lib\input.js:123:16)
    at ScssParser.unknownWord (C:\Users\project\node_modules\next\node_modules\postcss\lib\parser.js:518:22)
    at ScssParser.other (C:\Users\project\node_modules\next\node_modules\postcss\lib\parser.js:149:12)
    at ScssParser.parse (C:\Users\project\node_modules\next\node_modules\postcss\lib\parser.js:59:16)
    at scssParse (C:\Users\project\node_modules\next\dist\compiled\postcss-scss\scss-syntax.js:1:335)
    at new LazyResult (C:\Users\project\node_modules\next\node_modules\postcss\lib\lazy-result.js:122:16)
    at Processor.process (C:\Users\project\node_modules\next\node_modules\postcss\lib\processor.js:33:12)
    at CssMinimizerPlugin.optimizeAsset (C:\Users\project\node_modules\next\dist\build\webpack\plugins\css-minimizer-plugin.js:43:12)
    at C:\Users\project\node_modules\next\dist\build\webpack\plugins\css-minimizer-plugin.js:77:55
    at processTicksAndRejections (node:internal/process/task_queues:96:5)


> Build failed because of webpack errors
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

tailwind.config.js:

module.exports = {
    content: [
    "./pages/**/*.{js,ts,jsx,tsx}",
    "./components/**/*.{js,ts,jsx,tsx}",
  ],
  darkMode: true, // or 'media' or 'class'
  theme: {
    extend: {
            flex: {
                basis: '0 0 100%',
            },
            colors: {
                primary: { mint: "#18BCFF" },
                slate: {
                    50: "#f8fafc",
                    100: "#f1f5f9",
                    200: "#e5e5e5",
                    300: "#d4d4d4",
                    400: "#a3a3a3",
                    500: "#737373",
                    600: "#525252",
                    700: "#404040",
                    800: "#262626",
                    900: "#171717"
                }
            },
        }
        
  },

  plugins: [
        require('daisyui'),
        require('@tailwindcss/line-clamp'),
        require('tailwind-scrollbar'),
    ],
    variants: {
        scrollbar: ['rounded']
    }
}

next.config.js:

module.exports = {
  reactStrictMode: true,
    images: {
    domains: ['firebasestorage.googleapis.com'],
  },
}

_app.js:

import "../styles/globals.css"
import 'tailwindcss/tailwind.css'
import Layout from "../components/layout/layout"
import "../firebase/clientApp"
import { SessionProvider } from "next-auth/react"
import MintBG from "../components/layout/mintBG"

function MyApp({ Component, pageProps }) {
  return (
        <div className="text-white overflow-hidden">
            <AnimatedBG />
            <SessionProvider session={pageProps.session}>
                <Layout>
                    <Component {...pageProps} />
                </Layout>    
            </SessionProvider>
        </div>
    )
}

export default MyApp

postcss.config.js

console.log("Testing Postcss")

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

package.json

{
  "name": "project",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "@headlessui/react": "^1.4.2",
    "@tailwindcss/line-clamp": "^0.3.0",
    "daisyui": "^1.16.2",
    "dotenv": "^10.0.0",
    "embla-carousel-react": "^6.0.2",
    "firebase": "^9.4.1",
    "firebase-admin": "^10.0.0",
    "firebaseui": "^6.0.0",
    "formik": "^2.2.9",
    "lodash": "^4.17.21",
    "next": "latest",
    "next-auth": "^4.0.0-beta.7",
    "react": "17.0.2",
    "react-beautiful-dnd": "^13.1.0",
    "react-dom": "17.0.2",
    "react-icons": "^4.3.1",
    "svg-react-loader": "^0.4.6",
    "yup": "^0.32.11"
  },
  "devDependencies": {
    "autoprefixer": "^10.4.0",
    "eslint": "8.4.1",
    "eslint-config-next": "12.0.7",
    "postcss": "^8.4.5",
    "react-svg-loader": "^3.0.3",
    "tailwind-scrollbar": "^1.3.1",
    "tailwindcss": "^3.0.6"
  }
}

Notes:

• The console.log() from postcss.config.js edit: IS PRINTED
• C:\Users\project\static\css\b0067dc6dc66c8dc doesn't seem to resolve to a file when I alt+click it.
• The app will build fine when "./components/**/*.{js,ts,jsx,tsx}", is removed from content: [] in tailwind.config.js. /components/ jsx won't receive any TW styling, but the jsx in /pages/ work as expected.
• removing plugins: [] & variants: {} doesn't fix it.
• @tailwind base; @tailwind components; @tailwind utilities; are imported in globals.css.

Answer 1

Had the same problem today. Recheck all of your components styles. Check if you are passing dynamic value to the tailwind's custom className like w-[${width}px]. And change it to the inline react style like style={{ width }}. It causes the error during build time.

Answer 2

Another possible cause might be the semicolons in tailwind.config
Remove the semicolons in css strings in tailwind.config

  boxShadow: {
      card: 'rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;',  // migth cause this error
  }

  boxShadow: {
      card: 'rgba(99, 99, 99, 0.2) 0px 2px 8px 0px',  // Remove semi ;
  }