Я успешно перенес свой проект с Vite на NextJS, следуя официальным инструкциям.
Когда я попытался интегрировать tailwindcss дальше, возникла ошибка, как показано на следующем рисунке, после выполнения всего, что сказано в официальном документе.
После проб и ошибок я обнаружил, что ошибка связана с postcss.config.js, но понятия не имею, как решить эту проблему.
Ошибка исчезла, пока у меня нет файла postcss.config.js, но я все равно не могу заставить tailwind css работать без этого файла конфигурации.
Я пытался запустить dev server локально и с помощью docker, но оба варианта не принесли мне успеха. Я не могу найти ни одной проблемы, тесно связанной с моей.
Пожалуйста, помогите мне с этим.
Это код, который у меня связан с этой проблемой.
postcss.config.js
export default {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
};
tsconfig.json
{
"compilerOptions": {
"target": "ES2020",
"useDefineForClassFields": true,
"lib": ["ES2020", "DOM", "DOM.Iterable"],
"module": "ESNext",
"skipLibCheck": true,
"allowJs": true,
"forceConsistentCasingInFileNames": true,
"incremental": true,
"paths": { "@/*": ["/*"] },
/* Bundler mode */
"moduleResolution": "bundler",
"allowImportingTsExtensions": true,
"resolveJsonModule": true,
"isolatedModules": true,
"esModuleInterop": true,
"noEmit": true,
"jsx": "preserve",
/* Linting */
"strict": true,
"noUnusedLocals": true,
"noUnusedParameters": true,
"noFallthroughCasesInSwitch": true,
"plugins": [{ "name": "next" }]
},
"include": ["./dist/types/**/*.ts", "./next-env.d.ts"],
"exclude": ["./node_modules/"]
}
next.config.mjs
/** @type {import('next').NextConfig} */
const nextConfig = {
output: "export", // Outputs a Single-Page Application (SPA)
distDir: "./dist", // Changes the build output directory to `./dist/`
};
export default nextConfig;





Tailwind CSS — это плагин для PostCSS. Итак, вам придется установить пакет postcss и настроить конфигурацию с помощью файла postcss.config.js. Когда вы работаете над проектом Next.js и хотите использовать в нем Tailwind CSS, tailwindcss, postcss и autoprefixer — это типичная комбинация библиотек, которую вам придется установить.
Основываясь на контексте и сообщении об ошибке, которыми вы поделились, вот некоторые соображения, которые вам, возможно, придется принять во внимание:
Установите пакеты postcss и autoprefixer как зависимости для разработчиков:
npm install postcss --save-dev
npm install autoprefixer --save-dev
Настройте файл postcss.config.js (я полагаю, вы уже настроили файл tailwind.config.js):
module.exports = {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
};
Сообщение об ошибке также указывает на то, что существует проблема совместимости с использованием require() для вашего postcss.config.js в контексте, где ожидается ES Modules (ESM).
Итак, рассмотрите возможность преобразования синтаксиса postcss.config.js в ESM и переименуйте файл postcss.config.js в postcss.config.mjs.
Если все эти действия не решили вашу проблему, попробуйте применить то же самое к своему tailwind.config.js файлу.
Обновленный файл postcss.config.mjs будет выглядеть так:
export default {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
};
Но, основываясь на контексте и сообщении об ошибке, которыми вы поделились, я не могу глубже понять конкретную проблему вашего проекта. На самом деле, шаги в моем ответе типичны для проектов next.js, а код для postcss.config.js, которым я поделился, я всегда использовал в своих next.js проектах без каких-либо проблем. Чтобы лучше помочь вам в решении вашей уникальной проблемы, мне понадобится больше контекста и кодов вашего проекта, особенно для файлов post.config.js, tsconfig.js или jsconfig.js и next.config.js.
Я добавил код. Не могли бы вы взглянуть на это?
Хорошо, я посмотрю. Тем временем я только что обновил свой ответ. Попробуйте применить их в своем проекте и дайте мне знать, сработает ли это.
Спасибо за очень подробную инструкцию. Боюсь, помощь вашего предложения ограничена, поскольку оно совпадает с официальной документацией. Как я уже упоминал в описании, я следовал документации, но проблема все еще сохраняется.