Tailwind CSS not allowing Next.js to run - next.js

I don't know why but when I install Tailwind in my brand new empty Next.js project I get this error after running npm run dev.
ERROR
error - ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet1.rules[3].oneOf[11].use1!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet1.rules[3].oneOf[11].use[2]!./styles/globals.css
/Users/andregomes/Desktop/Note/todo/tailwind.config.js:6
SyntaxError: Invalid or unexpected token
Import trace for requested module:
./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet1.rules[3].oneOf[11].use1!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet1.rules[3].oneOf[11].use[2]!./styles/globals.css
./styles/globals.css
The best answer I found for this issue was in this Next.js discussion thread, but I already checked and I don't use tailwindcss/nesting. I just followed the regular installation instructions for Next.js and Tailwind.
tailwind.config.js
/** #type {import('tailwindcss').Config} */
module.exports = {
content: [
"./pages/**/*.{js,ts,jsx,tsx}",
"./components/**/*.{js,ts,jsx,tsx}",
​
// Or if using `src` directory:
"./src/**/*.{js,ts,jsx,tsx}",
],
theme: {
extend: {},
},
plugins: [],
}
postcss.config.js
module.exports = {
plugins: {
tailwindcss: {},autoprefixer: {},
},
}
package.json
{
"name": "todo",
"version": "0.1.0",
"private": true,
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start",
"lint": "next lint"
},
"dependencies": {
"#next/font": "13.1.3",
"eslint": "8.32.0",
"eslint-config-next": "13.1.3",
"next": "13.1.3",
"react": "18.2.0",
"react-dom": "18.2.0"
},
"devDependencies": {
"autoprefixer": "^10.4.13",
"postcss": "^8.4.21",
"tailwindcss": "^3.2.4"
}
}
globals.css
#tailwind base;
#tailwind components;
#tailwind utilities;

Please try after removing line number 6 (blank line) from tailwind.config.js and do npm run dev again. must be some special character at line 6.

Related

Tailwind failing to compile after making edits to the html file

Image
I've watched a few videos on how to set this up as well as went through the documentation. still having issues to where it compiles after the initial run of npm run build but further edits of the html file do not change in the browser. Also I've noticed it does not continue to rebuild in the terminal.
index.html
<link href="/dist/output.css" rel="stylesheet" />
input.css
#tailwind base;
#tailwind components;
#tailwind utilities;
package.json
{
"name": "tailwind",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "tailwindcss -i ./src/input.css -o ./dist/output.css --watch"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"tailwindcss": "^3.2.7"
}
}
tailwind.config.js
/** #type {import('tailwindcss').Config} */
module.exports = {
content: ["./src/**/*.{html,js}"],
theme: {
extend: {},
},
plugins: [],
};

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

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!
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.

Error when trying to deploy NextJS app on Vercel

I've been trying to deploy my NextJS onto Vercel, but keep getting the following error:
19:07:34.256
> Build error occurred
19:07:34.257
Error: Failed to load config "next/babel" to extend from.
19:07:34.258
Referenced from: /vercel/path0/.eslintrc
19:07:34.258
type: 'Error',
19:07:34.258
messageTemplate: 'extend-config-missing',
19:07:34.258
messageData: { configName: 'next/babel', importerName: '/vercel/path0/.eslintrc' }
19:07:34.258
}
19:07:34.277
Error: Command "npm run build" exited with 1
Below is my .babelrc file:
{
"presets": ["next/babel"],
"plugins": []
}
My .eslintrc file:
{
"extends": ["next/babel"]
}
And my package-json file:
{
"name": "google-docs",
"version": "0.1.0",
"private": true,
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start",
"lint": "next lint"
},
"dependencies": {
"#material-tailwind/react": "0.3.4",
"#next-auth/firebase-adapter": "^0.1.2",
"draft-js": "^0.11.7",
"firebase": "^8.9.1",
"next": "11.0.1",
"next-auth": "^3.27.3",
"react": "17.0.2",
"react-dom": "17.0.2",
"react-draft-wysiwyg": "^1.14.7",
"react-firebase-hooks": "^3.0.4"
},
"devDependencies": {
"autoprefixer": "^10.3.1",
"eslint": "7.32.0",
"eslint-config-next": "11.0.1",
"postcss": "^8.3.6",
"tailwindcss": "^2.2.7"
}
}
Also, building the project locally is also not working because of the same error. How do I solve this issue? Thank you in advance.
For those who are wondering, the solution that I used is first to remove the "next/babel" from the extends array, as julio has suggested.
Then, I install babel-eslint:
npm i babel-eslint --save-dev
I then changed the entire .eslintrc file to this:
{
"parser": "babel-eslint"
}
And the build was successful! Credit goes julio and the answers from this thread:
Parsing Error The Keyword import is Reserved (SublimeLinter-contrib-eslint)

Cannot find module 'autoprefixer' when running npx tailwindcss init -p command

I'm using Vue 3 and trying to add tailwindcss into it from the following tutorial. https://tailwindcss.com/docs/guides/vue-3-vite#install-tailwind-via-npm
I have installed the dependencies using the following command,
npm install -D tailwindcss#npm:#tailwindcss/postcss7-compat postcss#^7 autoprefixer#^9
But when I tried to create the configuration files using the following command
npx tailwindcss init -p
It is giving me the following error.
npx: installed 83 in 5.2s Cannot find module 'autoprefixer' Require
stack:
/~/.npm/_npx/33283/lib/node_modules/tailwindcss/lib/cli/commands/build.js
/~/.npm/_npx/33283/lib/node_modules/tailwindcss/lib/cli/commands/index.js
/~/.npm/_npx/33283/lib/node_modules/tailwindcss/lib/cli/main.js
/~/.npm/_npx/33283/lib/node_modules/tailwindcss/lib/cli.js
I don't know why autoprefixer is not detecting because I have already installed it.
Even the package.json have it.
{
"name": "wooclime",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
},
"dependencies": {
"core-js": "^3.6.5",
"vue": "^3.0.0"
},
"devDependencies": {
"#vue/cli-plugin-babel": "~4.5.0",
"#vue/cli-plugin-eslint": "~4.5.0",
"#vue/cli-service": "~4.5.0",
"#vue/compiler-sfc": "^3.0.0",
"autoprefixer": "^9.8.6",
"babel-eslint": "^10.1.0",
"eslint": "^6.7.2",
"eslint-plugin-vue": "^7.0.0-0",
"postcss": "^7.0.35",
"tailwindcss": "npm:#tailwindcss/postcss7-compat#^2.0.2"
},
"eslintConfig": {
"root": true,
"env": {
"node": true
},
"extends": [
"plugin:vue/vue3-essential",
"eslint:recommended"
],
"parserOptions": {
"parser": "babel-eslint"
},
"rules": {}
},
"browserslist": [
"> 1%",
"last 2 versions",
"not dead"
]
}
Run:
npx tailwindcss-cli#latest init -p
Please uninstall run this command:
npm uninstall tailwindcss postcss autoprefixer
After this module is uninstall, please run this command:
npm install tailwindcss#latest postcss#latest autoprefixer#latest
I had the same problem when I ran the command with node version 14.15.0.
Apparently using node 15.5 solved it for me. I think there's a problem with npm or something.
You could use the following command using the tailwindcss cli with latest version an the flag --postcss or -p
npx tailwindcss-cli#latest init --postcss
Or follow these steps :
After installing that dependencies try to create the following files project root without running that command :
tailwind.config.js
module.exports = {
purge: [],
darkMode: false, // or 'media' or 'class'
theme: {
extend: {},
},
variants: {
extend: {},
},
plugins: [],
};
postcss.config.js
module.exports = {
plugins: {
tailwindcss: {},
autoprefixer: {},
}
}
Then in your main CSS file add :
#tailwind base;
#tailwind components;
#tailwind utilities;
I had same issue
I downgrade the tailwindcss package to 1.0.5 from latest
Now it is working

Can't resolve 'css-loader' - Webpack Getting Started Error

Following exactly the getting started guide on the webpack site I run into this error on build:
ERROR in ./src/index.js Module not found: Error: Can't resolve 'css-loader' in 'C:\Users\Dominik\Desktop\tutorial' # ./src/index.js
2:0-21 webpack.config.js
The css-loader is installed locally. It is registered in the package.json. What Im I doing wrong?
const path = require("path");
module.exports = {
entry: "./src/index.js",
output: {
filename: "bundle.js",
path: path.resolve(__dirname, "dist")
},
module: {
rules: [
{
test: /\.css$/,
use: ["style-loader", "css-loader"]
}
]
}
};
package.json
{
"name": "tutorial",
"version": "1.0.0",
"description": "",
"private": true,
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack"
},
"author": "",
"license": "ISC",
"devDependencies": {
"css-loader": "^3.4.0",
"style-loader": "^1.1.1",
"webpack": "^4.41.4",
"webpack-cli": "^3.3.10"
},
"dependencies": {
"lodash": "^4.17.15"
}
}
index.js
import _ from "lodash";
import "./style.css";
function component() {
const element = document.createElement("div");
element.innerHTML = _.join(["Hello", "webpack"], " ");
element.classList.add("hello");
return element;
}
document.body.appendChild(component());
style.css
.hello {
color: red;
}
Try re-running npm install --save-dev css-loader. Can you see it in your node_modules folder?
EDIT
Uninstalling and re-installing the module fixed it:
npm remove css-loader && npm install --save-dev css-loader

Resources