The JavaScript of the module oojs-ui-widgets generates the HTML for the tabs and that module also provides the styling for those tabs. If you wish to manually create those tabs, either to prevent a FOUC or to show navigation to users without JavaScript, you can manually build the tabs based on the HTML generated by the widget, but you'll be left without any styling. There should be a way to obtain the styling, even when JavaScript is disabled.
This can be resolved by adding a new module, for example oojs-ui-widgets.styles, that only contains the style-related content, similar to oojs-ui-core.styles. It would look something like this:
'oojs-ui-widgets.styles' => [ 'class' => ResourceLoaderOOUIFileModule::class, 'themeStyles' => 'widgets', 'targets' => [ 'desktop', 'mobile' ], ],
I've added it to Resources.php, and that does the trick.
This is most likely going to occur for T117781: Convert Special:Preferences to OOUI as well, as the patch for that task hasn't yet resolved the TODO related to the FOUC for the fake tabs.