After using "create-next-app" to kickstart my latest Nextjs project and selecting tailwindcss in the installer, I encountered an unexpected error when trying to run the app with npm run dev:
Module parse failed: Unexpected character '@' (1:0)
> @import 'tailwindcss/base';
| @import 'tailwindcss/components';
| @import 'tailwindcss/utilities';
Seeking guidance from knowledgeable individuals out there who may have a solution... :)
Below you'll find excerpts from the code:
Layout.js:
import { Inter } from "next/font/google";
import "./globals.css";
const inter = Inter({ subsets: ["latin"] });
export const metadata = {
title: "Create Next App",
description: "Generated by create next app",
};
export default function RootLayout({ children }) {
return (
<html lang="en">
<body className={inter.className}>{children}</body>
</html>
);
}page.js:
import Image from "next/image";
export default function Home() {
return (
<>
<h1>Hello world</h1>
</>
);
}next.config.mjs
/** @type {import('next').NextConfig} */
const nextConfig = {};
export default nextConfig;Edit: Tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
content: [
"./pages/**/*.{js,ts,jsx,tsx,mdx}",
"./components/**/*.{js,ts,jsx,tsx,mdx}",
"./app/**/*.{js,ts,jsx,tsx,mdx}",
],
theme: {
extend: {
backgroundImage: {
"gradient-radial": "radial-gradient(var(--tw-gradient-stops))",
"gradient-conic":
"conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))",
},
},
},
plugins: [],
};New edit:
Error: enter image description here
Packages: { "name": "camping-fullstack", "version": "0.1.0", "private": true, "scripts": { "dev": "next dev", "build": "next build", "start": "next start", "lint": "next lint" }, "dependencies": { "next": "14.1.4", "react": "^18", "react-dom": "^18" }, "devDependencies": { "autoprefixer": "^10.4.19", "eslint": "^8", "eslint-config-next": "14.1.4", "postcss": "^8.4.38", "tailwindcss": "^3.4.3" } }