Just diving into the world of Next.js/React. I recently went through the Tailwind CSS for Next.js tutorial and successfully integrated Tailwind into my project by following these steps:
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p
Following the provided instructions, I made changes to the generated tailwind.config.js as shown below:
/** @type {import('tailwindcss').Config} */
module.exports = {
content: [
"./pages/**/*.{js,jsx}",
"./components/**/*.{js,jsx}",
],
theme: {
extend: {},
},
plugins: [],
}
As well as updating my globals.css file like this:
@tailwind base;
@tailwind components;
@tailwind utilities;
...additional CSS styles are included here (quite a few)
Upon launching the development server with npm run dev, I encountered errors related to nested CSS which led me to an helpful article on resolving CSS nesting issues with Tailwind.
To address this, I modified my postcss.config.js to the following:
module.exports = {
plugins: {
'postcss-import': {},
'tailwindcss/nesting': {},
tailwindcss: {},
autoprefixer: {},
}
}
However, I am now facing the following errors:
wait - compiling...
wait - compiling /404 (client and server)...
warn - ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[2].oneOf[8].use[1]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[2].oneOf[8].use[2]!./styles/globals.css
Warning
(42:5) Nested CSS was detected, but CSS nesting has not been configured correctly.
Please enable a CSS nesting plugin *before* Tailwind in your configuration.
See how here: https://tailwindcss.com/docs/using-with-preprocessors#nesting
... [repeating warning messages]
I'm puzzled by these errors, why are they occurring, and what steps can I take to resolve them?