[v4 alpha] NextJS dev server takes a long time to process requests

[kieranm]

Hey all,

I've upgraded to Tailwind v4 alpha and defined a custom theme for it. However I'm running into some severe performance problems with the NextJS dev server.

Removing the CSS import fixes the issue.

Here the route compiled relatively quickly in 1.7 seconds but it took 48 seconds before a response was returned.

Could anyone give me some pointers to go about debugging this and finding out what's causing this slowness? I'm not really sure where to begin with it, I've tried different configurations like moving the import into a client component, with/without a tailwind.config.js, removing my custom theme, nothing seems to make much difference.

Thanks!
Kieran

[kieranm]

Disabling PostCSS fixes the issue too. I'm wondering if too many files are being scanned. But I can't see any evidence that the tailwind.config.ts file in my project root is being picked up at all, so I'm not sure in the new V4 world how to specify the content glob list.

The initial compile above only took 1.7 seconds though, so I'm not sure this is actually the issue.

[kieranm]

Ah ok thanks! How does Tailwind determine whether or not something is a text file? Extension?

[RobinMalfait]

@kieranm Hey! Quick update: we released a new alpha version where you can use the new DEBUG=1 logs. You can install it using npm install tailwindcss@next @tailwindcss/postcss@next

Note: if Next.js determines that nothing changed, then it might not trigger the PostCSS parts at all. So to make sure it's working you should either remove .next or make a change in any of the files.

[kieranm]

Hi @RobinMalfait - thanks, we have upgraded to the new alpha release 26. We have also restructured our repository so that Tailwind no longer runs in the root of the monorepo and the performance seems to be much better so far.

The hot reload seems to be working now as well.

The timings from the debug output are below.

2024-10-08T10:44:56.746289Z  INFO detect_sources: tailwindcss_oxide: enter
2024-10-08T10:44:56.746384Z  INFO detect_sources:resolve_allowed_paths: tailwindcss_oxide::scanner::allowed_paths: enter
2024-10-08T10:44:56.748220Z  INFO detect_sources:resolve_allowed_paths: tailwindcss_oxide::scanner::allowed_paths: exit
2024-10-08T10:44:56.752333Z  INFO detect_sources: tailwindcss_oxide: exit
2024-10-08T10:44:56.752340Z  INFO scan_sources: tailwindcss_oxide: enter
2024-10-08T10:44:56.752343Z  INFO scan_sources: tailwindcss_oxide: exit
2024-10-08T10:44:56.752345Z  INFO compute_candidates: tailwindcss_oxide: enter
2024-10-08T10:44:56.752802Z  INFO compute_candidates:read_all_files: tailwindcss_oxide: enter
2024-10-08T10:44:56.752807Z  INFO compute_candidates:read_all_files: tailwindcss_oxide: Reading 188 file(s)
2024-10-08T10:44:56.760424Z  INFO compute_candidates:read_all_files: tailwindcss_oxide: exit
2024-10-08T10:44:56.760436Z  INFO compute_candidates:parse_all_blobs: tailwindcss_oxide: enter
2024-10-08T10:44:56.767911Z  INFO compute_candidates:parse_all_blobs: tailwindcss_oxide: exit
2024-10-08T10:44:56.767998Z  INFO compute_candidates: tailwindcss_oxide: exit
[@tailwindcss/postcss] Scan for candidates: 23.547ms
2024-10-08T10:44:56.769035Z  INFO get_files: tailwindcss_oxide: enter
2024-10-08T10:44:56.769065Z  INFO get_files: tailwindcss_oxide: exit
2024-10-08T10:44:56.769388Z  INFO get_globs: tailwindcss_oxide: enter
2024-10-08T10:44:56.769393Z  INFO get_globs: tailwindcss_oxide: exit
[@tailwindcss/postcss] Build CSS: 19.647ms
[@tailwindcss/postcss] Update PostCSS AST: 17.374ms
[@tailwindcss/postcss] Total time in @tailwindcss/postcss: 87.343ms

It would be great to get more visibility into those "188 files" that it's scanning so I can check they are what I would expect.

I will be continuing to test it for the rest of today and I will report back if any further issues, thanks!

[kieranm]

I am fairly sure Tailwind is scanning gitignored node_modules files if you're not incredibly careful with your content definitions

Content string

content: ["../../components/**/*.tsx", "../../menus/**/*.tsx"],

Result

2024-10-08T11:00:15.476208Z  INFO detect_sources: tailwindcss_oxide: enter
2024-10-08T11:00:15.476220Z  INFO detect_sources:resolve_allowed_paths: tailwindcss_oxide::scanner::allowed_paths: enter
2024-10-08T11:00:15.476306Z  INFO detect_sources:resolve_allowed_paths: tailwindcss_oxide::scanner::allowed_paths: exit
2024-10-08T11:00:15.479890Z  INFO detect_sources: tailwindcss_oxide: exit
2024-10-08T11:00:15.479905Z  INFO scan_sources: tailwindcss_oxide: enter
2024-10-08T11:00:17.083178Z  INFO scan_sources: tailwindcss_oxide: exit
2024-10-08T11:00:17.083191Z  INFO compute_candidates: tailwindcss_oxide: enter
2024-10-08T11:00:17.087528Z  INFO compute_candidates:read_all_files: tailwindcss_oxide: enter
2024-10-08T11:00:17.087533Z  INFO compute_candidates:read_all_files: tailwindcss_oxide: Reading 408 file(s)
2024-10-08T11:00:17.091064Z  INFO compute_candidates:read_all_files: tailwindcss_oxide: exit
2024-10-08T11:00:17.091078Z  INFO compute_candidates:parse_all_blobs: tailwindcss_oxide: enter
2024-10-08T11:00:17.101759Z  INFO compute_candidates:parse_all_blobs: tailwindcss_oxide: exit
2024-10-08T11:00:17.101882Z  INFO compute_candidates: tailwindcss_oxide: exit
[@tailwindcss/postcss] Scan for candidates: 1.627s
2024-10-08T11:00:17.103466Z  INFO get_files: tailwindcss_oxide: enter
2024-10-08T11:00:17.103775Z  INFO get_files: tailwindcss_oxide: exit
2024-10-08T11:00:17.104165Z  INFO get_globs: tailwindcss_oxide: enter
2024-10-08T11:00:17.104170Z  INFO get_globs: tailwindcss_oxide: exit
[@tailwindcss/postcss] Build CSS: 18.524ms
[@tailwindcss/postcss] Update PostCSS AST: 21.316ms
[@tailwindcss/postcss] Total time in @tailwindcss/postcss: 1.700s

Narrowed content string to src only

content: ["../../components/src/**/*.tsx", "../../menus/src/**/*.tsx"],

Result

2024-10-08T11:00:41.529383Z  INFO detect_sources: tailwindcss_oxide: enter
2024-10-08T11:00:41.529391Z  INFO detect_sources:resolve_allowed_paths: tailwindcss_oxide::scanner::allowed_paths: enter
2024-10-08T11:00:41.529448Z  INFO detect_sources:resolve_allowed_paths: tailwindcss_oxide::scanner::allowed_paths: exit
2024-10-08T11:00:41.534285Z  INFO detect_sources: tailwindcss_oxide: exit
2024-10-08T11:00:41.534296Z  INFO scan_sources: tailwindcss_oxide: enter
2024-10-08T11:00:41.538675Z  INFO scan_sources: tailwindcss_oxide: exit
2024-10-08T11:00:41.538683Z  INFO compute_candidates: tailwindcss_oxide: enter
2024-10-08T11:00:41.539362Z  INFO compute_candidates:read_all_files: tailwindcss_oxide: enter
2024-10-08T11:00:41.539370Z  INFO compute_candidates:read_all_files: tailwindcss_oxide: Reading 326 file(s)
2024-10-08T11:00:41.559635Z  INFO compute_candidates:read_all_files: tailwindcss_oxide: exit
2024-10-08T11:00:41.559651Z  INFO compute_candidates:parse_all_blobs: tailwindcss_oxide: enter
2024-10-08T11:00:41.568228Z  INFO compute_candidates:parse_all_blobs: tailwindcss_oxide: exit
2024-10-08T11:00:41.568624Z  INFO compute_candidates: tailwindcss_oxide: exit
[@tailwindcss/postcss] Scan for candidates: 41.735ms
2024-10-08T11:00:41.571386Z  INFO get_files: tailwindcss_oxide: enter
2024-10-08T11:00:41.571511Z  INFO get_files: tailwindcss_oxide: exit
2024-10-08T11:00:41.571664Z  INFO get_globs: tailwindcss_oxide: enter
2024-10-08T11:00:41.571670Z  INFO get_globs: tailwindcss_oxide: exit
[@tailwindcss/postcss] Build CSS: 25.442ms
[@tailwindcss/postcss] Update PostCSS AST: 33.161ms
[@tailwindcss/postcss] Total time in @tailwindcss/postcss: 127.36ms

This could be expected behaviour but it might really catch people out if not careful, just wanted to flag.

[RobinMalfait]

Yeah that's correct. With auto content detection we don't scan gitignored files/folders. But if you have a custom content array or @source in your CSS then we do scan those files no matter what.

The reason for this is so that otherwise you can't list anything inside your node_modules. So if you want to look for @source "../node_modules/my-lib/**/*.ts" then if we still ignore gitignored files that won't do anything.

That said, we have a solution that we will implement this week that should make this problem go away entirely, hopefully.