Не удалось интегрировать TailwindCSS с NextJS из-за postcss.config.js

Я успешно перенес свой проект с Vite на NextJS, следуя официальным инструкциям.
Когда я попытался интегрировать tailwindcss дальше, возникла ошибка, как показано на следующем рисунке, после выполнения всего, что сказано в официальном документе.


После проб и ошибок я обнаружил, что ошибка связана с postcss.config.js, но понятия не имею, как решить эту проблему.

Ошибка исчезла, пока у меня нет файла postcss.config.js, но я все равно не могу заставить tailwind css работать без этого файла конфигурации.

Я пытался запустить dev server локально и с помощью docker, но оба варианта не принесли мне успеха. Я не могу найти ни одной проблемы, тесно связанной с моей.
Пожалуйста, помогите мне с этим.

Это код, который у меня связан с этой проблемой.

  1. postcss.config.js

    export default {
      plugins: {
        tailwindcss: {},
        autoprefixer: {},
      },
    };
    
  2. 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/"]
    }
    
  3. 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;
    
Стоит ли изучать PHP в 2026-2027 годах?
Стоит ли изучать PHP в 2026-2027 годах?
Привет всем, сегодня я хочу высказать свои соображения по поводу вопроса, который я уже много раз получал в своем сообществе: "Стоит ли изучать PHP в...
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Приемы CSS-макетирования - floats и Flexbox
Приемы CSS-макетирования - floats и Flexbox
Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...
Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest
В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для...
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Пользовательский скаляр GraphQL
Пользовательский скаляр GraphQL
Листовые узлы системы типов GraphQL называются скалярами. Достигнув скалярного типа, невозможно спуститься дальше по иерархии типов. Скалярный тип...
1
0
174
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Tailwind CSS — это плагин для PostCSS. Итак, вам придется установить пакет postcss и настроить конфигурацию с помощью файла postcss.config.js. Когда вы работаете над проектом Next.js и хотите использовать в нем Tailwind CSS, tailwindcss, postcss и autoprefixer — это типичная комбинация библиотек, которую вам придется установить.

Основываясь на контексте и сообщении об ошибке, которыми вы поделились, вот некоторые соображения, которые вам, возможно, придется принять во внимание:

  1. Установите пакеты postcss и autoprefixer как зависимости для разработчиков:

    npm install postcss --save-dev
    npm install autoprefixer --save-dev
    
  2. Настройте файл postcss.config.js (я полагаю, вы уже настроили файл tailwind.config.js):

    module.exports = {
      plugins: {
        tailwindcss: {},
        autoprefixer: {},
      },
    };
    
  3. Сообщение об ошибке также указывает на то, что существует проблема совместимости с использованием 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: {},
      },
    };
    

Спасибо за очень подробную инструкцию. Боюсь, помощь вашего предложения ограничена, поскольку оно совпадает с официальной документацией. Как я уже упоминал в описании, я следовал документации, но проблема все еще сохраняется.

Hsun 15.03.2024 00:51

Но, основываясь на контексте и сообщении об ошибке, которыми вы поделились, я не могу глубже понять конкретную проблему вашего проекта. На самом деле, шаги в моем ответе типичны для проектов next.js, а код для postcss.config.js, которым я поделился, я всегда использовал в своих next.js проектах без каких-либо проблем. Чтобы лучше помочь вам в решении вашей уникальной проблемы, мне понадобится больше контекста и кодов вашего проекта, особенно для файлов post.config.js, tsconfig.js или jsconfig.js и next.config.js.

0xKevin 15.03.2024 02:05

Я добавил код. Не могли бы вы взглянуть на это?

Hsun 15.03.2024 02:41

Хорошо, я посмотрю. Тем временем я только что обновил свой ответ. Попробуйте применить их в своем проекте и дайте мне знать, сработает ли это.

0xKevin 15.03.2024 02:43

Другие вопросы по теме

Похожие вопросы

Проблема с файлами cookie сеанса, которые не отправляются в ответах между источниками с помощью Express, Redis и Next.js
Моя ранее работающая библиотека возвращает странное сообщение о невозможности чтения свойств null (чтение «useState») в обновлении NextJS 14
Как высмеять часть ответа API GraphQL?
Должно ли сообщение в блоге с комментариями быть статической страницей NextJS
Как загрузить PDF-файлы в nextjs с помощью загрузчика файлов веб-пакета (ошибка 404)
Как передать переменные env в пользовательский контейнер в веб-приложении Azure
Ошибка 403 Запрещено при загрузке в подписанный URL-адрес gcloud со стороны клиента с помощью next js
Next.JS AppProps — для обработки этого типа файла может потребоваться соответствующий загрузчик, в настоящее время ни один загрузчик не настроен для обработки этого файла
Почему я получаю сообщение об ошибке «модуль 'msw' не имеет экспортированных остатков элементов» для моего импорта «импорт { rest } из 'msw'»
Next.js 14 Генерация карты сайта с поддержкой нескольких языков