Dioxus CSS styling not consistent when using fullstack feature

I'm trying to set up a nav bar for my full stack web application, yet the CSS does not want to play ball.

When I first load the application (using dx serve --web), the styling is completely incorrect, but when I save in my IDE to prompt a hot reload (I have changed nothing), it updates and fixes the styling to what it should be.

Refreshing the page then reverts the CSS back to a jumbled mess and I don't know how to fix this. I assume it's do with with CSR/SSR but don't know where to start.

This issue only exists when I enable the fullstack feature.

When I first serve the application

Initial CSS styling (it should not look like this)

CSS styling after I prompt a hot reload by saving (I have changed nothing). This is what it should look.

This is what my main.rs looks like

use dioxus::prelude::*; use crate::views::{navbar::Navbar, pagenotfound::PageNotFound, home::Home, favourites::Favourites, directory::Directory, login::Login}; use crate::functions::navbar_css::Page; pub mod views; pub mod functions; const FAVICON: Asset = asset!("/assets/favicon.ico"); const TAILWIND_CSS: Asset = asset!("/assets/tailwind.css"); static PAGE: GlobalSignal<Option<Page>> = Signal::global(|| None); #[derive(Debug, Clone, Routable, PartialEq)] enum Route { #[layout(Navbar)] #[route("/")] Home {}, #[route("/directory")] Directory {}, #[route("/favourites")] Favourites {}, #[route("/login")] Login {}, #[end_layout] #[route("/:..route")] PageNotFound {route: Vec<String>} } fn main() { dioxus::launch(App); } // app page #[component] fn App() -> Element { rsx! { document::Link { rel: "favicon", href: FAVICON} document::Link { rel: "stylesheet", href: TAILWIND_CSS } Router::<Route> {} } }

This is what my nav bar looks like:

use dioxus::prelude::*; use crate::{ functions::navbar_css::{page_select_css, Page}, Route, }; const LOGO_LARGE_SVG: Asset = asset!("/assets/SVGs/logo_large.svg"); const LOGO_SMALL_SVG: Asset = asset!("/assets/SVGs/logo_small.svg"); const HOME_SVG: Asset = asset!("/assets/SVGs/home.svg"); const DIRECTORY_SVG: Asset = asset!("/assets/SVGs/directory.svg"); const FAVOURITES_SVG: Asset = asset!("/assets/SVGs/favourites.svg"); const LOGOUT_SVG: Asset = asset!("/assets/SVGs/logout.svg"); #[component] pub fn Navbar() -> Element { rsx! { main {class: "flex relative grid grid-cols-8 bg-zinc-800", body { class: "flex flex-col min-h-screen content-center col-span-8 mx-auto z-90", nav { class: "sticky top-0 bg-zinc-200 z-99", div { class: "flex content-normal text-nowrap border-b border-zinc-400", div { class: "flex flex-1 text-center min-w-fit md:min-w-1/2 content-center items-center", div {class: "p-1.5 m-1.5", img {class: "hidden md:inline w-30", src: LOGO_LARGE_SVG}, img {class: "inline md:hidden w-5", src: LOGO_SMALL_SVG} } Link { class: page_select_css(Page::Home), to: Route::Home {}, a {class:"hidden md:inline", "Home"} img {class: "inline md:hidden", src: HOME_SVG} }, Link { class: page_select_css(Page::Directory), to: Route::Directory {}, a {class:"hidden md:inline", "Directory"} img {class: "inline md:hidden", src: DIRECTORY_SVG} }, Link { class: page_select_css(Page::Favourites), to: Route::Favourites {}, a {class:"hidden md:inline", "Favourites"} img {class: "inline md:hidden", src: FAVOURITES_SVG} }, } div { class: "flex flex-1 grid grid-cols-4 text-center min-w-fit md:min-w-1/2 content-center", div {class: "col-span-3"} Link { class: page_select_css(Page::Login), to: Route::Login {}, a {class:"hidden md:inline", "Login"} img {class: "inline md:hidden", src: LOGOUT_SVG} }, } } } div { class: "flex-1 bg-white", Outlet::<Route> {} } } } } }