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:
console.log() from postcss.config.js edit: IS PRINTEDC:\Users\project\static\css\b0067dc6dc66c8dc doesn't seem to resolve to a file when I alt+click it."./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.plugins: [] & variants: {} doesn't fix it.@tailwind base; @tailwind components; @tailwind utilities; are imported in globals.css.Had the same problem today. Double check all your component styles. Check if you are passing a dynamic value to the tailwind's custom className like w-[${width}px] . And change it to inline react style like style={{ width }} . Raises the error at compile time.
I deleted the comments at the end of my file (not even inside the component) and the build command worked successfully. Sometimes code is just unbelievable.
In my case, I had a line in the block of a component like this:
function Foo({ givenListPaperWidth = 200 }) {
// ...
// The below line was commented
// const listPaperWidth = `w-[${givenListPaperWidth}px]`; (**)
return "Foo component";
}
Even though "(**) line" was commented, it was causing build error. After deleting the line, build was done successfully.