[Bug] tailwindcss generate failed after 5 seconds, please check your tailwind.css and tailwind.config.js(FIXED)

[ngechu]

What happens?

Unable to start project yarn start info - [plugin: ./node_modules/@umijs/plugins/dist/tailwindcss] tailwindcss service started Rebuilding... error - [plugin: ./node_modules/@umijs/plugins/dist/tailwindcss] tailwindcss generate failed after 5 seconds, please check your tailwind.css and tailwind.config.js Done in 19.57s.

Mini Showcase Repository(REQUIRED)

Please provide a minimal reproduction then upload to your GitHub. 请提供 最小重现，并上传到你的 GitHub 仓库

How To Reproduce

Under /node_modules/@umijs/plugins/dist/tailwindcss.js you can replicate the error by reducing CHECK_TIMEOUT_UNIT_SECOND value to lets say 1 second Expected behavior 1. 2. Should throw an error message on the console log

tailwindcss generate failed after 1 seconds, please check your tailwind.css and tailwind.config.js Done in 19.57s

Context

FIX I have increased the CHECK_TIMEOUT_UNIT_SECOND value from 5 seconds to 20 second inorder to give some buffer and wait to the generatedPath to be created. I have tested the fix and it is working well.

我已将 CHECK_TIMEOUT_UNIT_SECOND 值从 5 秒增加到 20 秒，以便提供一些缓冲并等待生成的路径创建。我已经测试了修复程序，效果很好。谢谢

Solved

• Umi Version:
• Node Version:
• Platform:

[mik284]

Nice @ngechu! I have been struggling with the same issue and thought I could fix it by switching between different branches, but this solution worked and saved me a ton of time.

[ngechu]

Nice @ngechu! I have been struggling with the same issue and thought I could fix it by switching between different branches, but this solution worked and saved me a ton of time.

Welcome,I also struggled with the same issue and resulted to diving into the node modules when my last working branch stopped working.

[burakakca]

How can I solve this problem.

module.exports = {
  content: [
    './src/pages/**/*.tsx',
    './src/components/**/*.tsx',
    './src/layouts/**/*.tsx',
        './src/styles/**/*.css',
  ],
}

import { defineConfig } from "@umijs/max";

export default defineConfig({
    ssr: {},
    npmClient: "pnpm",
    tailwindcss: {},
    reactQuery: {},
  routes: [
        { path: '/', redirect: '/kit/products' },
    { path: "/kit/products", component: "@/pages/kit/products" },
        // { path: "/docs", component: "@/pages/docs" },
  ],
});

max dev

info  - [你知道吗？] 如果想点击组件跳转至编辑器源码位置，可尝试新出的 clickToComponent 配置项，详见 https://umijs.org/docs/api/config#clicktocomponent
warn  - SSR feature is in beta, may be unstable
Mako https://makojs.dev is a new fast Rust based bundler from us, which is heavily optimized for umi and much faster than webpack. Visit https://makojs.dev/docs/getting-started#bundle-with-umi for more details if you want to give it a try.
info  - [plugin: ./node_modules/.pnpm/@umijs+plugins@4.3.11_@babel+core@7.25.2_@types+react-dom@18.3.0_@types+react@18.3.3_antd@4.2_daoykeix4hyj63bqvg6kbmzzbq/node_modules/@umijs/plugins/dist/react-query] [reactQuery] use local package, version: 4.36.1
info  - Umi v4.3.11
info  - Preparing...
wait  - [SSR] Compiling...
warn  - SSR feature is in beta, may be unstable
info  - [MFSU][eager] worker init, takes 482ms
fatal - Error: ERROR in ./src/.umi/umi.server.ts 12:0-102
Module not found: Error: Can't resolve '/home/burak/Desktop/hotwire/rails-7-fullstack/umijs/src/.umi/plugin-tailwindcss/tailwind.css' in '/home/burak/Desktop/hotwire/rails-7-fullstack/umijs/src/.umi'

umi compiled with 1 error
    at Watching.handler (/home/burak/Desktop/hotwire/rails-7-fullstack/umijs/node_modules/.pnpm/@umijs+bundler-webpack@4.3.11_type-fest@0.20.2_typescript@5.5.4_webpack@5.93.0/node_modules/@umijs/bundler-webpack/dist/build.js:82:79)
    at /home/burak/Desktop/hotwire/rails-7-fullstack/umijs/node_modules/.pnpm/@umijs+bundler-webpack@4.3.11_type-fest@0.20.2_typescript@5.5.4_webpack@5.93.0/node_modules/@umijs/bundler-webpack/compiled/webpack/index.js:93594:9
    at Hook.eval [as callAsync] (eval at create (/home/burak/Desktop/hotwire/rails-7-fullstack/umijs/node_modules/.pnpm/@umijs+bundler-utils@4.3.11/node_modules/@umijs/bundler-utils/compiled/tapable/index.js:1:7682), <anonymous>:24:1)
    at Hook.CALL_ASYNC_DELEGATE [as _callAsync] (/home/burak/Desktop/hotwire/rails-7-fullstack/umijs/node_modules/.pnpm/@umijs+bundler-utils@4.3.11/node_modules/@umijs/bundler-utils/compiled/tapable/index.js:1:4851)
    at Watching._done (/home/burak/Desktop/hotwire/rails-7-fullstack/umijs/node_modules/.pnpm/@umijs+bundler-webpack@4.3.11_type-fest@0.20.2_typescript@5.5.4_webpack@5.93.0/node_modules/@umijs/bundler-webpack/compiled/webpack/index.js:93590:28)
    at onCompiled (/home/burak/Desktop/hotwire/rails-7-fullstack/umijs/node_modules/.pnpm/@umijs+bundler-webpack@4.3.11_type-fest@0.20.2_typescript@5.5.4_webpack@5.93.0/node_modules/@umijs/bundler-webpack/compiled/webpack/index.js:93470:19)
    at /home/burak/Desktop/hotwire/rails-7-fullstack/umijs/node_modules/.pnpm/@umijs+bundler-webpack@4.3.11_type-fest@0.20.2_typescript@5.5.4_webpack@5.93.0/node_modules/@umijs/bundler-webpack/compiled/webpack/index.js:63704:17
    at Hook.eval [as callAsync] (eval at create (/home/burak/Desktop/hotwire/rails-7-fullstack/umijs/node_modules/.pnpm/@umijs+bundler-utils@4.3.11/node_modules/@umijs/bundler-utils/compiled/tapable/index.js:1:7682), <anonymous>:15:1)
    at Hook.CALL_ASYNC_DELEGATE [as _callAsync] (/home/burak/Desktop/hotwire/rails-7-fullstack/umijs/node_modules/.pnpm/@umijs+bundler-utils@4.3.11/node_modules/@umijs/bundler-utils/compiled/tapable/index.js:1:4851)
    at /home/burak/Desktop/hotwire/rails-7-fullstack/umijs/node_modules/.pnpm/@umijs+bundler-webpack@4.3.11_type-fest@0.20.2_typescript@5.5.4_webpack@5.93.0/node_modules/@umijs/bundler-webpack/compiled/webpack/index.js:63700:33
    at finalCallback (/home/burak/Desktop/hotwire/rails-7-fullstack/umijs/node_modules/.pnpm/@umijs+bundler-webpack@4.3.11_type-fest@0.20.2_typescript@5.5.4_webpack@5.93.0/node_modules/@umijs/bundler-webpack/compiled/webpack/index.js:59981:11)
    at /home/burak/Desktop/hotwire/rails-7-fullstack/umijs/node_modules/.pnpm/@umijs+bundler-webpack@4.3.11_type-fest@0.20.2_typescript@5.5.4_webpack@5.93.0/node_modules/@umijs/bundler-webpack/compiled/webpack/index.js:60286:11
    at Hook.eval [as callAsync] (eval at create (/home/burak/Desktop/hotwire/rails-7-fullstack/umijs/node_modules/.pnpm/@umijs+bundler-utils@4.3.11/node_modules/@umijs/bundler-utils/compiled/tapable/index.js:1:7682), <anonymous>:6:1)
    at Hook.CALL_ASYNC_DELEGATE [as _callAsync] (/home/burak/Desktop/hotwire/rails-7-fullstack/umijs/node_modules/.pnpm/@umijs+bundler-utils@4.3.11/node_modules/@umijs/bundler-utils/compiled/tapable/index.js:1:4851)
    at /home/burak/Desktop/hotwire/rails-7-fullstack/umijs/node_modules/.pnpm/@umijs+bundler-webpack@4.3.11_type-fest@0.20.2_typescript@5.5.4_webpack@5.93.0/node_modules/@umijs/bundler-webpack/compiled/webpack/index.js:60279:38
    at eval (eval at create (/home/burak/Desktop/hotwire/rails-7-fullstack/umijs/node_modules/.pnpm/@umijs+bundler-utils@4.3.11/node_modules/@umijs/bundler-utils/compiled/tapable/index.js:1:7682), <anonymous>:17:1)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
fatal - A complete log of this run can be found in:
fatal - /home/burak/Desktop/hotwire/rails-7-fullstack/umijs/node_modules/.cache/logger/umi.log
fatal - Consider reporting a GitHub issue on https://github.com/umijs/umi/issues

[ngechu]

Hi @burakakca , I think there is a problem with the way you installed tailwind in your project.Use the micro-generator provided by Umi to enable Tailwindcss in your project: Delete all the tailwind files tailwind.css and tailwind.config.js and run npx umi g tailwindcss This will configure tailwind for your umi max project.https://umijs.org/en-US/blog/develop-blog-using-umi#%E5%AE%89%E8%A3%85-tailwindcss

[burakakca]

I tried but still same problem.

[ngechu]

@burakakca Try to delete the .umi folder and then retry, I think the previous configs have been cached since your error is in the umi folder fatal - Error: ERROR in ./src/.umi/ It will be regenerated when you run the app again, I recommend using yarn..Btw I cannot see a lock file in your project, have you installed dependencies? After the above steps , run yarn install and make sure a lock file is generated then run the project using yarn dev

[burakakca]

I did those things but still nothing changed :/ my lock file is under package.json, vscode magic.

The problem is whenever I enable the ssr

[ngechu]

okay, i have not yet interacted with umi in ssr mode , so I cannot be able to debug it, but I can see a warning that ssr is unstable maybe thats the reason.Try reaching out to the core team.

[burakakca]

@ngechu thanks a lot, I will open a new issue.

[tylerrrkd]

Hi friend, how to change the config of CHECK_TIMEOUT_UNIT_SECOND. I got the same error with you. And I've search the docs, did not find the config. Thanks for you help.

[ngechu]

Hi @tylerrrkd , inside your node modules, navigate to /node_modules/@umijs/plugins/dist/tailwindcss.js. That is where the code is located.

[tylerrrkd]

Hi @tylerrrkd , inside your node modules, navigate to /node_modules/@umijs/plugins/dist/tailwindcss.js. That is where the code is located.

@ngechu thank you friend. whoops, but I am using @umijs/max, and changing the node_modules seems not the best way, maybe I could only wait for the official fix or commit a pr.

[ngechu]

Hi @tylerrrkd , inside your node modules, navigate to /node_modules/@umijs/plugins/dist/tailwindcss.js. That is where the code is located.

@ngechu thank you friend. whoops, but I am using @umijs/max, and changing the node_modules seems not the best way, maybe I could only wait for the official fix or commit a pr.

Yeah @tylerrrkd , I posted this to help anyone who has been blocked by the error since it only occur in development. I will look into creating a pull request to fix the issue.Thanks friend

[tylerrrkd]

@ngechu Hi friend, I found my problem is that I set the node_modules path in the content of tailwind.config.js. And I upgrade the version of tailwindcss after @3.4.9, the problem resolved. You could try it though.