Tailwind не загружает новое приложение nextjs... Неожиданный символ '@'CSS

Разбираемся в CSS
Ответить
Anonymous
 Tailwind не загружает новое приложение nextjs... Неожиданный символ '@'

Сообщение Anonymous »

Я использовал «create-next-app» для создания нового проекта Nextjs. Я выбрал Tailwindcss в установщике, но когда я пытаюсь запустить приложение с помощью npm run dev, я получаю эту ошибку:

Код: Выделить всё

Module parse failed: Unexpected character '@' (1:0)
> @import 'tailwindcss/base';
| @import 'tailwindcss/components';
| @import 'tailwindcss/utilities';
Надеюсь, найдутся умные люди, которые смогут дать мне ответ... :)
Я вставлю код ниже:
Layout.js:


< pre class="snippet-code-js lang-js Prettyprint-override">

Код: Выделить всё

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 (

{children}

);
}


page.js:

Код: Выделить всё

import Image from "next/image";

export default function Home() {
return (

Hello world

);
}


next.config.mjs

Код: Выделить всё

/** @type {import('next').NextConfig} */
const nextConfig = {};

export default nextConfig;


Изменить:
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: [],
};


Новое редактирование:
Ошибка :
введите здесь описание изображения
Пакеты:
{
"name": "camping-fullstack",
"version": " 0.1.0",
"private": true,
"scripts": {
"dev": "следующая разработка",
"build": "следующая сборка",
"start": "следующий старт",
"lint": "следующий lint"
},
"зависимости": {
"next": "14.1 .4",
"react": "^18",
"react-dom": "^18"
},
"devDependities": {
"autoprefixer": "^10.4.19",
"eslint": "^8",
"eslint-config-next": "14.1.4",
"postcss": "^8.4.38",
"tailwindcss": "^3.4.3"
}


Подробнее здесь: https://stackoverflow.com/questions/782 ... -character
Ответить

Быстрый ответ

Изменение регистра текста: 
Смайлики
:) :( :oops: :roll: :wink: :muza: :clever: :sorry: :angel: :read: *x)
Ещё смайлики…
   
К этому ответу прикреплено по крайней мере одно вложение.

Если вы не хотите добавлять вложения, оставьте поля пустыми.

Максимально разрешённый размер вложения: 15 МБ.

Вернуться в «CSS»