React craco tailwind postcss integration

Question

My project use craco to start/build, I wish to integrate tailwind postcss. I have follow this tutorial https://dev.to/ryandunn/how-to-use-tailwind-with-create-react-app-and-postcss-with-no-hassle-2i09 But as a result, I am suffering with this error:

My config files looks like below:

craco.config.js (this one looks like where problem lies, as I feel like the style may overriding craco style underneath, so it caused above error, but not 100% sure how to resolve this puzzl.)

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" },
          },
        },
      },
  };

I am running the app from

docker-compose up

Any suggestions to fix the error and config? Please advise with some code example Thanks in advance

Answer 1

You need to uninstall tailwindcss postcss and autoprefixer. Then re install them with these specific versions

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

I had the same issue! There is more info in this link. https://tailwindcss.com/docs/installation#post-css-7-compatibility-build