Description
What version of Tailwind CSS are you using?
v4.0.0
What build tool (or framework if it abstracts the build tool) are you using?
For example: Angular 19
What version of Node.js are you using?
For example: v22.0.x
What browser are you using?
For example: Chrome
What operating system are you using?
For example: macOS
Reproduction URL
NA
Describe your issue
We have a 2000+ module monorepo where a few 100 of these modules use Tailwind 3.x and are built as libraries with Nx.
Then we tried migrating.
- Added .postcssrc.json with this content:
{
"plugins": {
"@tailwindcss/postcss": {}
}
}
- Ran
npx @tailwindcss/upgrade@next
Tried to run one of our Tailwind apps. It takes forever to build and it eventually fails with an out-of-memoy error:
> nx run online-travel-agency:serve:development --host=dev.wink.travel --port=4200 --ssl=true --ssl-key=./certs/dev.wink.travel-key.pem --ssl-cert=./certs/dev.wink.travel.pem
Warning: This is a simple server for use in testing or debugging Angular applications
locally. It hasn't been reviewed for security issues.
Binding this server to an open connection can result in compromising your application or
computer. Using a different host than the one passed to the "--host" flag might result in
websocket connection issues. You might need to use "--disable-host-check" if that's the
case.
Component HMR has been enabled.
If you encounter application reload issues, you can manually reload the page to bypass HMR and/or disable this feature with the `--no-hmr` command line option.
Please consider reporting any issues you encounter here: https://github.com/angular/angular-cli/issues
⠋ Building...
<--- Last few GCs --->
[26609:0x120008000] 495037 ms: Mark-Compact 4014.9 (4129.8) -> 4001.1 (4132.3) MB, pooled: 5 MB, 1536.67 / 0.00 ms (average mu = 0.125, current mu = 0.032) allocation failure; scavenge might not succeed
[26609:0x120008000] 496680 ms: Mark-Compact 4016.9 (4132.3) -> 4003.0 (4134.0) MB, pooled: 3 MB, 1631.75 / 0.00 ms (average mu = 0.067, current mu = 0.007) allocation failure; scavenge might not succeed
<--- JS stacktrace --->
FATAL ERROR: Ineffective mark-compacts near heap limit Allocation failed - JavaScript heap out of memory
----- Native stack trace -----
1: 0x1006a874c node::OOMErrorHandler(char const*, v8::OOMDetails const&) [/opt/homebrew/Cellar/node@22/22.13.0/bin/node]
2: 0x10084fff0 v8::Utils::ReportOOMFailure(v8::internal::Isolate*, char const*, v8::OOMDetails const&) [/opt/homebrew/Cellar/node@22/22.13.0/bin/node]
3: 0x10084ffa4 v8::internal::V8::FatalProcessOutOfMemory(v8::internal::Isolate*, char const*, v8::OOMDetails const&) [/opt/homebrew/Cellar/node@22/22.13.0/bin/node]
4: 0x1009f59d8 v8::internal::Heap::CallGCPrologueCallbacks(v8::GCType, v8::GCCallbackFlags, v8::internal::GCTracer::Scope::ScopeId) [/opt/homebrew/Cellar/node@22/22.13.0/bin/node]
5: 0x1009f7720 v8::internal::Heap::DevToolsTraceEventScope::~DevToolsTraceEventScope() [/opt/homebrew/Cellar/node@22/22.13.0/bin/node]
6: 0x1009f6090 v8::internal::Heap::CollectGarbage(v8::internal::AllocationSpace, v8::internal::GarbageCollectionReason, v8::GCCallbackFlags)::$_1::operator()() const [/opt/homebrew/Cellar/node@22/22.13.0/bin/node]
7: 0x1009f5d44 void heap::base::Stack::SetMarkerAndCallbackImpl<v8::internal::Heap::CollectGarbage(v8::internal::AllocationSpace, v8::internal::GarbageCollectionReason, v8::GCCallbackFlags)::$_1>(heap::base::Stack*, void*, void const*) [/opt/homebrew/Cellar/node@22/22.13.0/bin/node]
8: 0x1005b8028 PushAllRegistersAndIterateStack [/opt/homebrew/Cellar/node@22/22.13.0/bin/node]
9: 0x1009f4700 v8::internal::Heap::CollectGarbage(v8::internal::AllocationSpace, v8::internal::GarbageCollectionReason, v8::GCCallbackFlags) [/opt/homebrew/Cellar/node@22/22.13.0/bin/node]
10: 0x1009eace8 v8::internal::HeapAllocator::AllocateRawWithLightRetrySlowPath(int, v8::internal::AllocationType, v8::internal::AllocationOrigin, v8::internal::AllocationAlignment) [/opt/homebrew/Cellar/node@22/22.13.0/bin/node]
11: 0x1009eb454 v8::internal::HeapAllocator::AllocateRawWithRetryOrFailSlowPath(int, v8::internal::AllocationType, v8::internal::AllocationOrigin, v8::internal::AllocationAlignment) [/opt/homebrew/Cellar/node@22/22.13.0/bin/node]
12: 0x1009c49ac v8::internal::MaybeHandle<v8::internal::SeqOneByteString> v8::internal::FactoryBase<v8::internal::Factory>::NewRawStringWithMap<v8::internal::SeqOneByteString>(int, v8::internal::Tagged<v8::internal::Map>, v8::internal::AllocationType) [/opt/homebrew/Cellar/node@22/22.13.0/bin/node]
13: 0x100c3ee7c v8::internal::String::SlowFlatten(v8::internal::Isolate*, v8::internal::Handle<v8::internal::ConsString>, v8::internal::AllocationType) [/opt/homebrew/Cellar/node@22/22.13.0/bin/node]
14: 0x100cfd634 v8::internal::Runtime_StringCharCodeAt(int, unsigned long*, v8::internal::Isolate*) [/opt/homebrew/Cellar/node@22/22.13.0/bin/node]
15: 0x100499af4 Builtins_CEntry_Return1_ArgvOnStack_NoBuiltinExit [/opt/homebrew/Cellar/node@22/22.13.0/bin/node]
16: 0x109ad3e18
17: 0x10976c2ec
18: 0x10976efbc
19: 0x10976ee1c
20: 0x10976e830
21: 0x1004c865c Builtins_ArrayMap [/opt/homebrew/Cellar/node@22/22.13.0/bin/node]
22: 0x1096e3450
23: 0x100441290 Builtins_AsyncFunctionAwaitResolveClosure [/opt/homebrew/Cellar/node@22/22.13.0/bin/node]
24: 0x10050c4d8 Builtins_PromiseFulfillReactionJob [/opt/homebrew/Cellar/node@22/22.13.0/bin/node]
25: 0x100431594 Builtins_RunMicrotasks [/opt/homebrew/Cellar/node@22/22.13.0/bin/node]
26: 0x100402af4 Builtins_JSRunMicrotasksEntry [/opt/homebrew/Cellar/node@22/22.13.0/bin/node]
27: 0x1009610f8 v8::internal::(anonymous namespace)::Invoke(v8::internal::Isolate*, v8::internal::(anonymous namespace)::InvokeParams const&) [/opt/homebrew/Cellar/node@22/22.13.0/bin/node]
28: 0x1009617f0 v8::internal::(anonymous namespace)::InvokeWithTryCatch(v8::internal::Isolate*, v8::internal::(anonymous namespace)::InvokeParams const&) [/opt/homebrew/Cellar/node@22/22.13.0/bin/node]
29: 0x100984cf0 v8::internal::MicrotaskQueue::RunMicrotasks(v8::internal::Isolate*) [/opt/homebrew/Cellar/node@22/22.13.0/bin/node]
30: 0x100984a80 v8::internal::MicrotaskQueue::PerformCheckpointInternal(v8::Isolate*) [/opt/homebrew/Cellar/node@22/22.13.0/bin/node]
31: 0x1005b95e4 node::InternalCallbackScope::Close() [/opt/homebrew/Cellar/node@22/22.13.0/bin/node]
32: 0x1005b9b64 node::InternalMakeCallback(node::Environment*, v8::Local<v8::Object>, v8::Local<v8::Object>, v8::Local<v8::Function>, int, v8::Local<v8::Value>*, node::async_context, v8::Local<v8::Value>) [/opt/homebrew/Cellar/node@22/22.13.0/bin/node]
33: 0x1005d1a04 node::AsyncWrap::MakeCallback(v8::Local<v8::Function>, int, v8::Local<v8::Value>*) [/opt/homebrew/Cellar/node@22/22.13.0/bin/node]
34: 0x1006ae958 node::fs::FSReqCallback::Resolve(v8::Local<v8::Value>) [/opt/homebrew/Cellar/node@22/22.13.0/bin/node]
35: 0x1006b1420 node::fs::AfterScanDir(uv_fs_s*) [/opt/homebrew/Cellar/node@22/22.13.0/bin/node]
36: 0x10069f094 node::MakeLibuvRequestCallback<uv_fs_s, void (*)(uv_fs_s*)>::Wrapper(uv_fs_s*) [/opt/homebrew/Cellar/node@22/22.13.0/bin/node]
37: 0x10498214c uv__work_done [/opt/homebrew/Cellar/libuv/1.50.0/lib/libuv.1.dylib]
38: 0x104985a74 uv__async_io [/opt/homebrew/Cellar/libuv/1.50.0/lib/libuv.1.dylib]
39: 0x10499601c uv__io_poll [/opt/homebrew/Cellar/libuv/1.50.0/lib/libuv.1.dylib]
40: 0x104985f08 uv_run [/opt/homebrew/Cellar/libuv/1.50.0/lib/libuv.1.dylib]
41: 0x1005ba428 node::SpinEventLoopInternal(node::Environment*) [/opt/homebrew/Cellar/node@22/22.13.0/bin/node]
42: 0x1006f2774 node::NodeMainInstance::Run(node::ExitCode*, node::Environment*) [/opt/homebrew/Cellar/node@22/22.13.0/bin/node]
43: 0x1006f24c8 node::NodeMainInstance::Run() [/opt/homebrew/Cellar/node@22/22.13.0/bin/node]
44: 0x100668ca0 node::Start(int, char**) [/opt/homebrew/Cellar/node@22/22.13.0/bin/node]
45: 0x19d158274 start [/usr/lib/dyld]
fatal error: all goroutines are asleep - deadlock!
goroutine 1 [chan receive]:
github.com/evanw/esbuild/internal/helpers.(*ThreadSafeWaitGroup).Wait(...)
github.com/evanw/esbuild/internal/helpers/waitgroup.go:36
main.runService.func2()
github.com/evanw/esbuild/cmd/esbuild/service.go:114 +0x88
main.runService(0x1)
github.com/evanw/esbuild/cmd/esbuild/service.go:160 +0x47c
main.main()
github.com/evanw/esbuild/cmd/esbuild/main.go:241 +0x898
goroutine 7 [chan receive]:
main.runService.func1()
github.com/evanw/esbuild/cmd/esbuild/service.go:98 +0x40
created by main.runService in goroutine 1
github.com/evanw/esbuild/cmd/esbuild/service.go:97 +0x19c
goroutine 8 [chan receive]:
main.(*serviceType).sendRequest(0x140000ea2d0, {0x102b81d60, 0x140151e9080})
github.com/evanw/esbuild/cmd/esbuild/service.go:192 +0x138
main.runService.func3()
github.com/evanw/esbuild/cmd/esbuild/service.go:125 +0x44
created by main.runService in goroutine 1
github.com/evanw/esbuild/cmd/esbuild/service.go:122 +0x2e4
goroutine 997 [chan receive, 8 minutes]:
main.(*serviceType).sendRequest(0x140000ea2d0, {0x102b81d60, 0x14003930a20})
github.com/evanw/esbuild/cmd/esbuild/service.go:192 +0x138
main.(*serviceType).convertPlugins.func2.4({{0x14004bb9b90, 0x90}, {0x102a473ef, 0x4}, {0x0, 0x0}, {0x0, 0x0}, 0x0})
github.com/evanw/esbuild/cmd/esbuild/service.go:1069 +0x634
github.com/evanw/esbuild/pkg/api.(*pluginImpl).onLoad.func1({{0x0, 0x0}, {{0x14004bb9b90, 0x90}, {0x102a473ef, 0x4}, {0x0, 0x0}, {{0x0, 0x0}}, ...}})
github.com/evanw/esbuild/pkg/api/api_impl.go:1992 +0x130
github.com/evanw/esbuild/internal/bundler.runOnLoadPlugins({0x140011a2840?, 0x0?, 0x0?}, {0x102c0a1c0, 0x14001240d40}, 0x1400109baa0, {0x140000f9f10, 0x14000c88168, 0x14000c88210, 0x14001240d20, ...}, ...)
github.com/evanw/esbuild/internal/bundler/bundler.go:1072 +0x9cc
github.com/evanw/esbuild/internal/bundler.parseFile({{0x102c0a1c0, 0x14001240d40}, {0x140000f9f10, 0x14000c88168, 0x14000c88210, 0x14001240d20, 0x6, 0x140010f6930}, 0x14002267208, 0x1400109baa0, ...})
github.com/evanw/esbuild/internal/bundler/bundler.go:162 +0x1f0
created by github.com/evanw/esbuild/internal/bundler.(*scanner).maybeParseFile in goroutine 451
github.com/evanw/esbuild/internal/bundler/bundler.go:1512 +0xa0c
goroutine 49 [chan receive, 8 minutes]:
main.(*serviceType).sendRequest(0x140000ea2d0, {0x102b81d60, 0x140000ea930})
github.com/evanw/esbuild/cmd/esbuild/service.go:192 +0x138
main.(*serviceType).convertPlugins.func2.2()
github.com/evanw/esbuild/cmd/esbuild/service.go:944 +0x100
github.com/evanw/esbuild/pkg/api.(*pluginImpl).onStart-fm.(*pluginImpl).onStart.func1()
github.com/evanw/esbuild/pkg/api/api_impl.go:1843 +0x34
github.com/evanw/esbuild/internal/bundler.ScanBundle.func1({{0x102a50abf, 0x12}, {0x1400020e420, 0x1, 0x1}, {0x14000260b40, 0x1, 0x1}, {0x14000260ba0, 0x1, ...}}, ...)
github.com/evanw/esbuild/internal/bundler/bundler.go:1286 +0x7c
created by github.com/evanw/esbuild/internal/bundler.ScanBundle in goroutine 19
github.com/evanw/esbuild/internal/bundler/bundler.go:1285 +0xb4c
goroutine 19 [semacquire, 8 minutes]:
sync.runtime_Semacquire(0x1400031c380?)
runtime/sema.go:71 +0x2c
sync.(*WaitGroup).Wait(0x14000146590)
sync/waitgroup.go:118 +0x74
github.com/evanw/esbuild/internal/bundler.ScanBundle(_, {_, _, _, _, _, _}, {_, _}, _, ...)
github.com/evanw/esbuild/internal/bundler/bundler.go:1369 +0x6c4
github.com/evanw/esbuild/pkg/api.rebuildImpl({0x14000200420, {0x1400020e498, 0x1, 0x1}, {0x0, 0x0, 0x0}, {0x0, 0x1, 0x2, ...}, ...}, ...)
github.com/evanw/esbuild/pkg/api/api_impl.go:1479 +0x1f8
github.com/evanw/esbuild/pkg/api.(*internalContext).rebuild(_)
github.com/evanw/esbuild/pkg/api/api_impl.go:998 +0x2cc
github.com/evanw/esbuild/pkg/api.(*internalContext).Rebuild(0x1400027c508?)
github.com/evanw/esbuild/pkg/api/api_impl.go:1059 +0x3c
main.(*serviceType).handleIncomingPacket.func5()
github.com/evanw/esbuild/cmd/esbuild/service.go:293 +0xa0
created by main.(*serviceType).handleIncomingPacket in goroutine 1
github.com/evanw/esbuild/cmd/esbuild/service.go:290 +0x12b0
goroutine 14 [chan send, 8 minutes]:
github.com/evanw/esbuild/internal/bundler.ScanBundle.func2()
github.com/evanw/esbuild/internal/bundler/bundler.go:1320 +0x23c
created by github.com/evanw/esbuild/internal/bundler.ScanBundle in goroutine 19
github.com/evanw/esbuild/internal/bundler/bundler.go:1318 +0x6bc
goroutine 1096 [chan receive, 8 minutes]:
main.(*serviceType).sendRequest(0x140000ea2d0, {0x102b81d60, 0x14006b15e60})
github.com/evanw/esbuild/cmd/esbuild/service.go:192 +0x138
main.(*serviceType).convertPlugins.func2.4({{0x1400b552140, 0x91}, {0x102a473ef, 0x4}, {0x0, 0x0}, {0x0, 0x0}, 0x0})
github.com/evanw/esbuild/cmd/esbuild/service.go:1069 +0x634
github.com/evanw/esbuild/pkg/api.(*pluginImpl).onLoad.func1({{0x0, 0x0}, {{0x1400b552140, 0x91}, {0x102a473ef, 0x4}, {0x0, 0x0}, {{0x0, 0x0}}, ...}})
github.com/evanw/esbuild/pkg/api/api_impl.go:1992 +0x130
github.com/evanw/esbuild/internal/bundler.runOnLoadPlugins({0x1400016b8c0?, 0x140021d1f88?, 0x10262e1bc?}, {0x102c0a1c0, 0x14001192ae0}, 0x14001590fc0, {0x14001c2c380, 0x14000c88858, 0x14000c88870, 0x14001192ac0, ...}, ...)
github.com/evanw/esbuild/internal/bundler/bundler.go:1072 +0x9cc
github.com/evanw/esbuild/internal/bundler.parseFile({{0x102c0a1c0, 0x14001192ae0}, {0x14001c2c380, 0x14000c88858, 0x14000c88870, 0x14001192ac0, 0x6, 0x14000e7ca80}, 0x14001f40d88, 0x14001590fc0, ...})
github.com/evanw/esbuild/internal/bundler/bundler.go:162 +0x1f0
created by github.com/evanw/esbuild/internal/bundler.(*scanner).maybeParseFile in goroutine 443
github.com/evanw/esbuild/internal/bundler/bundler.go:1512 +0xa0c
goroutine
Not really sure what else to report. Guessing it's the number of modules that causes this. Works great with Tailwind 3.x.
Looking at what the migration tool did was change our libs from this:
@config "./tailwind-component.config.js";
@tailwind components;
@tailwind utilities;
to this:
@import 'tailwindcss/utilities' layer(utilities);
@config "./tailwind-component.config.js";
And our app css from this:
@tailwind base;
@tailwind components;
@tailwind utilities;
to this:
@import 'tailwindcss';
/* You can add global styles to this file, and also import other style files */
/*
The default border color has changed to `currentColor` in Tailwind CSS v4,
so we've added these compatibility styles to make sure everything still
looks the same as it did with Tailwind CSS v3.
If we ever want to remove these styles, we need to add an explicit border
color utility to any element that depends on these defaults.
*/
@layer base {
*,
::after,
::before,
::backdrop,
::file-selector-button {
border-color: var(--color-gray-200, currentColor);
}
}
Reverting back to v3 for now.