Блог

Мой проект использует craco для запуска / сборки, я хочу интегрировать tailwind postcss. Я следую этому руководству https://dev.to/ryandunn/how-to-use-tailwind-with-create-react-app-and-postcss-with-no-hassle-2i09 Но в результате я страдаю от этой ошибки:

Мои конфигурационные файлы выглядят следующим образом:

craco.config.js (это похоже на то, в чем заключается проблема, так как я чувствую, что стиль может переопределять стиль craco внизу, поэтому это вызвало указанную выше ошибку, но не уверен на 100%, как решить эту загадку.)

 module.exports = {
  style: {
    postcss: {
      plugins: [
        require("tailwindcss")("./tailwind.config.js"),
        require("postcss-nested"),
        require("autoprefixer"),
      ],
    },
  },
  

postcss.config.js

 const tailwindcss = require('tailwindcss');
module.exports = {
    plugins: [
        tailwindcss('./tailwind.js'),
        require('autoprefixer')
    ],
};
  

tailwind.config.js

 module.exports = {
    purge: ["./src/**/*.html", "./src/**/*.jsx", "./src/**/*.js", "./src/**/*.tx", "./src/**/*.tsx"],
    theme: {
        extend: {
          screens: {
            xs: { max: "400px" },
          },
        },
      },
  };
  

Я запускаю приложение из

 docker-compose up
  

Есть предложения по исправлению ошибки и конфигурации?
Пожалуйста, посоветуйте какой-нибудь пример кода
Заранее спасибо

Вам необходимо удалить tailwindcss postcss и autoprefixer. Затем переустановите их с этими конкретными версиями

 npm install tailwindcss@npm:@tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9
  

У меня была такая же проблема! По этой ссылке есть дополнительная информация. https://tailwindcss.com/docs/installation#post-css-7-compatibility-build