docusaurus: Fails when installing in a repo using Tailwind PostCSS plugin: cannot read config from undefined

@Kiyozz I have concluded that it has nothing to do with PNPM, but rather about your PostCSS config. Because we use PostCSS, the loader will read the postcss.config.js file. However, this seems to be the cause: https://github.com/Kiyozz/papyrus-compiler-app/blob/139-docusaurus/postcss.config.js

I don’t have much experience with Tailwind CSS (I know @slorber does 😄) So I’d have to see where it goes wrong. I know this config is included in the Tailwind docs.

Edit. This seems to do the trick:

// postcss.config.js

module.exports = {
  plugins: {
    tailwindcss: {
      content: ["./src/**/*.{html,js}"],
    },
    autoprefixer: {},
  },
}

I wonder why the tailwind plugin is not reading the tailwind.config.js in this case

I don’t think anyone has stumbled upon it

During manual migration I faced the same issue. Not sure why. But when I removed all changes and tried migration for the second time I didn’t get the issue. Our repo doesn’t use tailwind css. I used yarn both time.

Adding a docs/web/postcss.config.js with module.exports = {} does seem to fix it. We probably won’t add it to the template, but I think it’s a good enough solution for your case.

I fixed it by creating tailwind.config.js file and adding basic default tailwind config 😄

module.exports = {
  content: [],
  theme: {
    extend: {},
  },
  plugins: [],
}

I’m having the same issue. The docusarus project works fines as an independent project. The moment I moves it to a subdir under another project with postcss.config.js in the parent dir, docusarus yarn build will fail.

root_project (next.js + tailwind)
   | package.json
   | postcss.config.js. <--- Test: rename this file and the error will go away
   ...
   | --- docs (docusaurus)
         ...

Workaround:

• As suggested above, create tailwind.config.js in docs dir with the following content

module.exports = {
  content: [],
  theme: {
    extend: {},
  },
  plugins: [],
}

I hope this helps.

@slorber You need to have Tailwind installed and configured through postcss.config.js and/or tailwind.config.js in your parent directory.

It worked on my intel MacBook pro and throws config error in m1 mac 😅 .

I don’t think anyone has stumbled upon it (although I do know a few sites that use Tailwind + Docusaurus, or Docusaurus in a repo that also uses Tailwind) and it’s ultimately just a workaround. Preferably, we should be able to fix it, but given my limited knowledge in either PostCSS or Tailwind, I’ll let @slorber make the decision

It feels strange that postcss loader is searching recursively for a postcss config.

That’s typical behavior with most loaders. E.g. Babel loader will recursively look for a babel.config.js afaik.

Does having a postcss config in the template disallow the loader to search recursively?

Adding a docs/web/postcss.config.js with module.exports = {} does seem to fix it. We probably won’t add it to the template, but I think it’s a good enough solution for your case.

Yeah. Thank you @Josh-Cena. I think documenting and if possible, trying to catch the error and show some meaningful error messages would be wonderful.

I have an M1 pro and can’t reproduce this issue with those 3 commands 🤷‍♂️

Can reproduce on a fresh install on an M1 machine. The commands I ran was

npx create-docusaurus@latest docs classic
cd docs
yarn start

Fixed by following @harish-sethuraman 's advice, creating a tailwind.config.js with default configs in the root of docusaurus folder.

yarn version: 1.22.5 node version: v16.13.2

Meh, I’m M1 as well. Would be interesting to have any non-M1 contributor to investigate

@Kiyozz Do you use M1 mac by any chance?

Indeed