Active Links - Laravel/Jetstream

I am doing the Inertia module on Laracasts but having terrible trouble making progress. I followed the Jetstream approach suggested in the comments of a few videos and seemed to get everything working but various issues keep coming up. I am using the standard commands to start my local servers

npm run dev
php artisan serve

At first I noticed that tailwind styles were only getting applied to some elements and not others specifically margin seemed to be getting applied but bold and size were not getting applied. I tried restarting the servers and it seemed to work but eventually when I commented out the default Fonts section in views/app.blade.php it seemed to be working ok again. But today more issues.

:class="{
                        'font-bold underline': $page.component == '/users',
                    }"
:class="{
                        'font-bold underline':
                            $page.url.startsWith('/settings'),
                    }"

I am trying to apply these styles dynamicaly within the Nav component. The second seems to work but the first does not. I have the expected tree structure: Root->Inertia->[component] where I have 3 components /, /users and /settings. But when you click on the inertia component no matter that the correct component is below in the structure the values for component and url within inertia are shown as the ones that I was on when I restart my local servers. Not sure if this explains why the $page.url seems to work but the $page.component does not.