\n\nBut UButton compenent classes ('font-medium' 'inline-flex'...) are not availble :\n\u003Cimg width=\"901\" alt=\"Image\" src=\"https://github.com/user-attachments/assets/3b5c21cb-b1ba-48f4-805a-c9fccd8573b2\" />\n\nWhich result in the folowing :\n\u003Cimg width=\"283\" alt=\"Image\" src=\"https://github.com/user-attachments/assets/294a3a0c-fea0-4bfd-ad73-2e3d6e80fdae\" />\n\n### Additional context\n\ntested with pnpm\n\n### Logs\n\n```shell-script\nNo error logged in the console\n```",[2060,2061,2064],{"name":1985,"color":1986},{"name":2062,"color":2063},"duplicate","cfd3d7",{"name":2029,"color":2030},3402,"closed","NuxtUI component classes not picked up by tailwind","2025-02-26T10:03:21Z","https://github.com/nuxt/ui/issues/3402",0.7264344,{"description":2072,"labels":2073,"number":2078,"owner":1991,"repository":1991,"state":2066,"title":2079,"updated_at":2080,"url":2081,"score":2082},"### Environment\n\n- Operating System: `Linux`\r\n- Node Version: `v16.14.2`\r\n- Nuxt Version: `3.0.0`\r\n- Nitro Version: `1.0.0`\r\n- Package Manager: `npm@8.5.5`\r\n- Builder: `vite`\r\n- User Config: `-`\r\n- Runtime Modules: `-`\r\n- Build Modules: `-`\n\n### Reproduction\n\nRepro link: https://github.com/Kasheftin/nuxt-ssr-reactivity-issue\r\nRepro steps:\r\n - go to http://localhost:3000/users/5604\r\n - console shows `[Vue warn]: Hydration text content mismatch in \u003Cdiv> (- Client: Navbar: users > #5604 - Server: Navbar: )`\n\n### Describe the bug\n\nAny application might consist on general/common components (side menu, navbar) and pages. Usually navbar have to match the page. In my [minimal repro](https://github.com/Kasheftin/nuxt-ssr-reactivity-issue) navbar shows breadcrumbs. There's a global variable (e.g. pinia/vuex or just a global ref) used for communication between the page and the navbar. \r\n\r\n[User details page](https://github.com/Kasheftin/nuxt-ssr-reactivity-issue/blob/master/pages/users/%5Bid%5D.vue) is responsible for loading the data using `useAsyncData` helper accordingly to `route.params.id` parameter. When the data is loaded, it updates the breadcrumbs variable:\r\n\r\n````typescript\r\nimport { breadcrumbs } from '@/stores/breadcrumbs'\r\nconst route = useRoute()\r\nconst id = computed(() => route.params.id)\r\nconst { data, refresh } = useAsyncData\u003C{id: number; title: string}>('user', async () => {\r\n const result = await fetch(`https://gorest.co.in/public/v2/users/${id.value}`)\r\n return await result.json()\r\n})\r\nwatch(id, refresh)\r\nwatch(() => [id.value, data.value?.id], () => {\r\n breadcrumbs.value = ['users', data.value?.title || '#' + id.value]\r\n}, { immediate: true })\r\n````\r\n\r\nThis works just fine on the client. \r\n\r\nHowever, there's an issue with SSR. It looks like anything that was rendered before the page (layout components or parent pages) stops being reactive at the point when user details is being received. Logging shows that `breadcrumbs` was updated correctly, every child component is being rendered correctly as well, but everything from the parent context does not respond to changes.\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell\n[Vue warn]: Hydration text content mismatch in \u003Cdiv>:\r\n- Client: Navbar: users > #5604\r\n- Server: Navbar: \r\n at \u003CUsers onVnodeUnmounted=fn\u003ConVnodeUnmounted> ref=Ref\u003C undefined > > \r\n at \u003CAnonymous key=\"/users\" routeProps= {Component: {…}, route: {…}} pageKey=\"/users\" ... > \r\n at \u003CAnonymous > \r\n at \u003CRouterView name=undefined route=undefined > \r\n at \u003CNuxtPage> \r\n at \u003CApp key=1 > \r\n at \u003CNuxtRoot>\n```\n",[2074,2077],{"name":2075,"color":2076},"3.x","29bc7f",{"name":2017,"color":2018},15605,"Rectivity lost / hydration mismatch in ssr for parent component","2023-01-19T18:24:53Z","https://github.com/nuxt/nuxt/issues/15605",0.7275841,{"description":2084,"labels":2085,"number":2090,"owner":1991,"repository":1992,"state":2066,"title":2091,"updated_at":2092,"url":2093,"score":2094},"### Description\n\nDue to different time zones, `new Date().getFullYear()` in [the example in the docs](https://ui3.nuxt.dev/components/footer#usage) will cause hydration mismatch ",[2086,2089],{"name":2087,"color":2088},"question","d876e3",{"name":2029,"color":2030},3264,"An example in the docs that can cause hydration mismatch","2025-02-07T10:41:12Z","https://github.com/nuxt/ui/issues/3264",0.7276657,{"description":2096,"labels":2097,"number":2100,"owner":1991,"repository":1992,"state":2066,"title":2101,"updated_at":2102,"url":2103,"score":2104},"### Version\n\nv3 latest commit\n\n### Description\n\nThe `size-*` class applied by a button gets overwritten by the icon itself.\n\nLeft one is in my project, right one is from the docs:\n\n\u003Cimg width=\"300\" alt=\"Image\" src=\"https://github.com/user-attachments/assets/c1c427fd-6854-4623-b5f1-db47a74450e2\" />\n\n\u003Cimg width=\"428\" alt=\"Image\" src=\"https://github.com/user-attachments/assets/7f2bf278-8b13-4d8b-84ec-beb29d9036bb\" />\n\nI couldnt reproduce in a fresh project, but my project is pretty clean still with no customizations. Might have something to do with the css order?\n",[2098,2099],{"name":1985,"color":1986},{"name":2029,"color":2030},2926,"v3: Icon size gets overwritten by icon's width/height","2024-12-29T11:55:14Z","https://github.com/nuxt/ui/issues/2926",0.7292505,["Reactive",2106],{},["Set"],["ShallowReactive",2109],{"TRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"0sA-HaK2LFlmutyBIzgdWUYM7s2CBpuktidMP6YlwyY":-1},"/nuxt/ui/2796"]